将项目添加到 jQuery Masonry答案

【问题标题】：Prepend items to jQuery Masonry将项目添加到 jQuery Masonry
【发布时间】：2014-01-28 14:39:52
【问题描述】：

我已经能够非常高兴地将项目附加到 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，这几乎可以解决问题。我会继续寻找，但我怀疑其他人可能知道更好的方法。

【问题讨论】：

代码一开始看起来不错。你确定这些元素真的是前置的并且得到了正确的标记吗？你有活生生的例子吗？砌体示例在这里，代码看起来基本相同：masonry.desandro.com/demos/adding-items.html
嗨西蒙，还没有一个活生生的例子。我认为代码是正确的。但我认为前置可能是不可能的，因为发生的是你需要更多空间，否则项目重叠。您是否知道任何预先设置该工作的示例。我将发布一个我想出的 hack（在 10 秒内）。
我在之前的 cmets 中发布的链接指向一个前置元素的工作示例（来自 Masonry 文档）
抱歉，我会更详细地看一下。
我将尝试完全复制他的，如果不是，我可能会在几分钟内将它放到 heroku 上

标签： jquery jquery-masonry

【解决方案1】：

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

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

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

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

【讨论】：

谢谢西蒙，我最初看过，然后完全忘记了。非常感谢您的帮助:)
Simon 我不接受答案，所以我可以等待几天并奖励赏金。你真的帮了我这个忙。

【解决方案2】：

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

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

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

【讨论】：