1

我已经能够非常高兴地将项目附加到 jQuery masonry 以创建“无限滚动”效果。

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

我这样设置砌体：

$(document).ready(function(){

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

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

<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，这几乎可以解决问题。我会继续寻找，但我怀疑其他人可能知道更好的方法。

4

2 回答 2

2

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

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

这会导致问题，因为在获取图像之前，大多数浏览器会将图片呈现为height: 0. 这就是使reload砌体马赛克“马赛克”的原因（考虑到第一个新图像0px在高度上，它重新排列了马赛克）。

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

于 2013-01-06T07:53:21.247 回答
0

以防有人发现这个。reload如果您预先添加新元素，则不适用于当前版本。你必须使用prepended. 似乎每个站点都引用了reload。必须适用于以前的版本。

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

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

于 2014-01-28T06:39:52.520 回答