Question

我需要一个严肃的帮助。我创建了一个带有砌体布局的页面，我需要添加更多效果。请参阅以下结构：

<div id="main-container">
 <div class="item">Content Here... 1 </div>
 <div class="item">Content Here... 2 </div>
 <div class="item">Content Here... 3 </div>
 <div class="item">Content Here... 4 </div>
 <div class="item">Content Here... 5 </div>
 <div class="item">Content Here... 6 </div>
 <div class="item">Content Here... 7 </div>
 <div class="LoadMore">More Content</div>
</div>

加载页面后，只会显示前3个项目。当我点击＆＃34;更多内容＆＃34;然后将显示其他3个项目。按钮。

这是我的砌石代码：

var $container = $('#main-container');
$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector    : '.item',
    //isFitWidth        : true,
    gutter          : 20,
    columnWidth     : 355,
  });
});

期待您的帮助。提前谢谢你：）

Answer 1

试试这个On More More函数使用AJAX就像这样...

jQuery.ajax({
    type: "POST",
    url: ajax_url, // ajax_url for WordPress and PHP used your php file.
    data: ajax_data,
    cache: false,
    success: function (html) {
        if (html.length > 0) {
            jQuery("#main-container").append(el).masonry( 'reload' ););
        }
    });
});

Masonry +使用Jquery加载更多功能

1 个答案: