Question

我能够非常愉快地将项目附加到jQuery砌体上，以便创建“无限滚动”效果。

我天真地认为类似的策略可以在Masonified内容之前添加内容。

我设置了这样的砌体：

$(document).ready(function(){

   var $container = $('#pics');
        $container.imagesLoaded( 
        function(){
            $container.masonry({ 
            itemSelector : '.item',
            isFitWidth: true,
            isAnimated: true });
        });
});

原始图像出现在此循环中（使用Playframework 1.2.4 with Java）

<div id="pics" class="pics">
            #{list items:pics, as:'pic'}
                <div class="item">
                    <a href="https://s3.amazonaws.com/bucket/${pic.url}"/>
                    <img src="https://s3.amazonaws.com/bucket/${pic.url}" class="pic" style="height:${pic.height}">
                    </a>
                </div>
            #{/list}
</div>

这就是我将新图片添加到Masonified“newpics”div中的地方：

  $.each(data.files, function (index, file) {

var filename_leaf = milliTime+"-"+file.name;
var filename_stem = "https://s3.amazonaws.com/bucket/";
var filename = filename_stem+filename_leaf;

var newpic = "<div class='item'>"+
   "<a href='"+filename+"'>"+
   "<img src='"+filename+"'"+
   " class='pic' style='height:"+file.height+"'>"+
   "</a></div>";

$('#pics').prepend(newpic).masonry('reload');

 });

图片是预先添加的，但它们落后于现有图片。

如果有一些刷新/重新加载#pics div而没有刷新整个页面几乎可以解决问题。我会继续寻找，但我怀疑别人可能知道更好的方式。

Answer 1

你的问题不在于砌体。您的错误是，上传新照片后，高度值未定义。这意味着您的图片标记如下所示：

<img style="height:undefined" class="pic" src="/photo.jpg">

这会导致问题，因为在获取图像之前，大多数浏览器会将图片呈现为height: 0。这就是制作reload砌体马赛克＆＃34;马车＆＃34; 的原因（考虑到第一张新图像的高度为0px，它会重新布局马赛克）

因此，您应确保获得图像的height的有效值。或者等到图像完全加载以触发reload方法。

Answer 2

只是有人发现这个。如果您添加新元素，reload对当前版本不起作用。您必须使用prepended。似乎每个网站引用reload。必须是以前的版本。

msnry.prepended( elements )
// or with jQuery
$container.masonry( 'prepended', elements )

http://masonry.desandro.com/methods.html

将项目添加到jQuery Masonry

2 个答案: