ajax加载后砌体加载为1列答案

【问题标题】：masonry loading as 1 column after ajax loadajax加载后砌体加载为1列
【发布时间】：2011-10-20 01:17:41
【问题描述】：

我正在为我的投资组合项目使用砖石。当我直接进入页面时，它会将图块加载到适当的列中。但是，我的网站是使用 pjax 加载的，当我加载投资组合页面时，所有投资组合项目都会加载到 1 列中，直到我调整窗口大小。

它就像砌体在 ajax 请求后不知道客户端的宽度，然后在调整窗口大小时从它中弹出。

任何有砌体经验的人知道我正在经历什么？

【问题讨论】：

没有在线沙箱，没有 jsfiddle - 很难说你的错误可能在哪里。首先，Masonry 需要元素的宽度才能正确布局，因此您可能需要延迟 Masonry 回调。
我现在正在经历，你找到解决办法了吗？除了调用重载？

标签： jquery ajax jquery-masonry

【解决方案1】：

将您的 masonry 调用包装在 ajaxComplete 中，以便在 ajax 加载后触发。

$( document ).ajaxComplete(function() {
  console.log("Ajax finished"); //remove this if you want, useful for debugging
      $(document).ready(function() {
      $('#content').masonry({
       columnWidth: 260, //change this accordingly
       itemSelector: '.item'
      });
    });
});

我自己只是在努力解决这个问题。

这里有更好的解决方案：

$(document).ready(function() {
      $('#admin_content').masonry({
       columnWidth: 260,
       itemSelector: '.masonry-item',
       isAnimated:true,
                animationOptions: {
                    duration: 500,
                    easing:'swing',
                    queue :false
               }
      });
    });
$( document ).ajaxComplete(function() {
    $('#admin_content').masonry('reloadItems').masonry();
});

【讨论】：

【解决方案2】：

试试这个

$(window).load(function(){
var $container = $('#image_gallery');
$container.masonry({
    columnWidth: 230,
    itemSelector: '.brick'
});

$.ajax({
    url: 'url',
    type: 'post',
    success:function(response){
        response = JSON.parse(response);
        if(response.thumbs && response.thumbs.length > 0){
            $.each(response.thumbs, function(i, img){
                var eleHeight = (img.theight/img.twidth)*220;
                item += '<div class="brick" style="height:'+eleHeight+'px;width:220px"><a href="#">';
                item += '<img src="' + img.thumbUrl + '" /></a></div>';
    });
    }
    var $boxHtml = $(item);
        $container.append($boxHtml).masonry('appended', $boxHtml, true);
    }
});
});

服务器端 json 输出：
{ 大拇指：[{ 高度：250 thumbUrl: "/uploads/thumbs/image.jpg" 宽度：167.1875 }] }

注意：调整 columnWidth 属性以匹配砖块 div 的宽度。（例如，如果砖 div 具有左右填充 5px，则总宽度为 220+10，即 230px，如上面的代码）

【讨论】：