砌体+使用Jquery加载更多功能

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项将首先显示。然后当我点击“更多内容”按钮时会显示其他3个项目。

这是我的砖石代码：

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

期待您的帮助。预先感谢您:)

Answer 1

试试这主使用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');); 
     } 
    }); 
}); 

巫编程语言