0

我正在使用马赛克流列出我的项目，但其中有很多，所以我只想显示前 20 个项目，然后单击按钮显示前 20 个下方的下一个 20，依此类推。

为此，我使用了一个 ajax 调用它的工作完美，所以它显示了接下来的 20 个项目，但随后马赛克流布局中断了......

有谁知道我该如何解决这个问题？

我尝试使用马赛克流添加事件，但随后它将接下来的 20 个项目添加到最小的列中......

我还尝试将数据附加到马赛克流容器，但这也不好......

html 看起来像这样（2 列）：

    <div class="mosaicflow">
        <div class="mosaicflow__column">
            <div class="mosaicflow__item">
                // item details
            </div>
            <div class="mosaicflow__item">
                // item details
            </div>
            // more mosaicflow__item divs
        </div>
        <div class="mosaicflow__column">
            <div class="mosaicflow__item">
                // item details
            </div>
            <div class="mosaicflow__item">
                // item details
            </div>
            // more mosaicflow__item divs
        </div>
    </div>

在 ajax 成功中，我附加了从脚本中获得的数据：

$(document).on('click', '#btn', function(){
    //...
    success:function(data) {
    $('.mosaicflow').append(data);
    }
});

我通过 ajax 从 php 脚本中以这种格式获取数据：

<div class="mosaicflow__item">
    // item details
</div>

更新，这里是完整的 html 和 ajax 代码：

<?php
include_once('connection.php');
$categoryName = 'Category';
$query = $pdo->prepare("SELECT * FROM items WHERE cat_name = '$categoryName' ORDER BY id DESC LIMIT 20");

$query->execute();
$items = $query->fetchAll();
$item_id = '';
if($query->rowCount() > 0) {; ?>
    <div class="mosaicflow myContainer">                
    <?php
    foreach($items as $item) { ?>
            <div class="mosaicflow__item">
                <h3><?php echo $item['name'] ?></h3>
                <p><?php echo summary($item['text']); ?></p>
                <div class="ButtonHolder">
                    <a href="link.html" class="button" style="vertical-align:middle;"><span>Link </span></a>
                </div>
            </div>
    <?php
        $item_id = $item['id'];
     } ?>
    <button name="btn_more" id="btn_more" data-item="<?php echo $item_id; ?>" class="btn btn-success form-control" >more</button>
<?php
}
else  {
    echo "<p>There are no items!</p>";
}
?>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/jquery.mosaicflow.js"></script>
<script>
    $(document).ready(function(){
        $(document).on('click', '#btn_more', function(){
            var last_item_id = $(this).data("item");
            $('#btn-more').html("loading...");
            $.ajax({
                url: "load_items.php",
                type: "POST",
                data: {last_item_id:last_item_id,categoryname:"<?php echo $categoryName; ?>"},
                dataType: "text",
                success:function(data)
                {
                    if (data != '') {
                        $('#btn_more').remove();

                        // Init mosaicflow
                        var container = $('.myContainer').mosaicflow();

                        // Create new html node and append to smallest column
                        var elm = $(data);
                        container.mosaicflow('add', elm);
                        //$('.mosaicflow').append(data);
                    }
                    else {
                        $('#btn_more').html("No Data");
                    }
                }
            });
        });
    });
</script>

Ajax (load_items.php):

<?php
include_once('connection.php');
$output = '';
$item_id = '';
$lastItemId = $_POST['last_item_id'];
$categoryName = $_POST['categoryname'];
$query = $pdo->prepare("SELECT * FROM items WHERE cat_name = '$categoryName' AND id < $lastItemId ORDER BY id DESC LIMIT 20");
$query->execute();
$items = $query->fetchAll();
$items_num = $query->rowCount();
if($items_num > 0) {
    foreach ($items as $item) {
        $item_id = $item['id'];
        $output .= '<div class="mosaicflow__item">';
        $output .= '<h3>' . $item['name'] . '</h3>';
        $output .= '<p>' . $item['text'] . '</p>';
        $output .= '<div class="ButtonHolder">';
        $output .= '<a href="link.html" class="button" style="vertical-align:middle;"><span>Link </span></a>';
        $output .= '</div>';
        $output .= '</div>';
    }
    $output .= '<button name="btn_more" id="btn_more" data-item="' . $item_id . '" class="btn btn-success form-control" >more</button>';
    echo $output;
}
?>
4

1 回答 1

0

更新了 jQuery ajax 调用

$(document).on('click', '#btn', function(){
    //...
    success:function(data) {
    data = $('<div />').append(data).find('.mosaicflow__item').html();  
    $('.mosaicflow .mosaicflow__item').append(data);
    }
});

于 2016-05-18T13:24:50.013 回答