我知道InfiniteScroll和Masonry合作得很好.但我正在使用Yii的无限滚动扩展(称为yiinfinite-scroll)并尝试在其上应用砌体.无限卷轴本身也很完美,砌体本身也是如此.但是在InfiniteScroll尝试加载一组新图像(我有一个图像页面)之后,InfiniteScroll的回调部分似乎没有触发,因为新添加的元素中没有任何砌体代码并且出现在后面第一个可见的项目.(我知道经常会报告这个错误,但到目前为止我找到的解决方案并不适用于我).
我显示图片的结构如下所示:
<div class="items">
<div class="pic">...</pic>
<div class="pic">...</pic>
...
</div>
Run Code Online (Sandbox Code Playgroud)
第一页加载看起来像这样
<div class="items masonry" style="...">
<div class="pic masonry-brick" ...></div>
<div class="pic masonry-brick" ...></div>
...
</div> // everything's fine, masonry is injected into the code
Run Code Online (Sandbox Code Playgroud)
无限滚动动态加载新图像后,它们看起来像这样:
<div class="items masonry" ...></div>
<div class="pic masonry-brick" ...></div>
...
// appended pics:
<div class="pic"></div>
<div class="pic"></div>
</div> // so no masonry functionality was applied
Run Code Online (Sandbox Code Playgroud)
我的砌体代码:
$(function (){
var $container = $('.items');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.pic',
columnWidth: 405
});
});
});
$container.infinitescroll({
// normally, the options …Run Code Online (Sandbox Code Playgroud)