ajax加载后，砌体加载为1列

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

它就像石工不知道ajax请求后的客户端的宽度，然后当窗口调整大小时，它会跳出来。

任何人都知道我所经历的石工经验吗？

2011-10-20 stewart715

没有在线沙箱，没有jsfiddle - 很难说你的错误可能在哪里。首先，砌体需要正确布置元素的宽度，所以可能需要延迟砌体回调。 – Systembolaget

我现在正在体验它，你有没有找到任何解决方案？除了调用重新加载？ –

在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(); 
});

来源

2013-09-15 16:22:16 Vigs

试试这个

$(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输出：
{ 大拇指：[{ theight：250 thumbUrl：“/上传/大拇指/image.jpg“ twidth：167.1875 }] }

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

来源

2013-12-28 10:14:01

ajax加载后，砌体加载为1列

回答

相关问题