砌体重新加载和重新加载项目不起作用

Question

砌体（v3）代码：

$(function msnry(){
var columns = 3,
setColumns = function() { columns = $( window ).width() > 640 ? 3 : $(window).width() >    320 ? 2 : 1; };
setColumns();
$(window).resize(setColumns);

    // layout Masonry again after all images have loaded
    var $container = $('#portfoliocontent').masonry();
    var msnry;
    $container.imagesLoaded( function(){
    msnry = new Masonry( container, {
    itemSelector : '.item',
    columnWidth:  function( containerWidth ) { return containerWidth / columns;}
      });
});

我的砖石容器（又名我的投资组合）

<div id="portfoliocontent" class="portfoliocontainer"></div>

我的目标是隐藏所有具有“designshwr”类的 div，该类有效，但是重新加载砌体根本不起作用。

$('.engineeringiC').click(function(){
    if($('div.item').hasClass('designshwr')){
    $('div.item.designshwr').hide('fast');
    $('.portfoliocontainer').masonry('reloadItems');

}

有什么建议吗？在过去的一周里，我一直在摸索不同的方法来让它工作，但我仍然没有得到任何运气:(

Answer 1

我终于彻底解决了这个问题。

$(function msnry(){
var columns = 3,
setColumns = function() { columns = $( window ).width() > 640 ? 3 : $(window).width() >          320 ? 2 : 1; };
setColumns();
$(window).resize(setColumns);

// layout Masonry again after all images have loaded
var $container = $('#portfoliocontent').masonry();
var msnry;
$container.imagesLoaded( function(){
msnry = new Masonry( container, {
itemSelector : '.item',
columnWidth:  function( containerWidth ) { return containerWidth / columns;}
  });
});

var $container = $('#portfoliocontent').masonry();

如果其他人遇到此问题，可能是因为您将砌体初始化应用于容器变量。现在效果很好:)

Answer 2

我也遇到过同样的问题。可能是我的解决方案效率不高，但是到目前为止，每当我获得最佳解决方案时，我都使用了它。你可以试试这个，希望它对你也有帮助。

$('.engineeringiC').click(function(){
    var $container = $('#portfoliocontent').masonry();
    if($('div.item').hasClass('designshwr')){
    $('div.item.designshwr').hide('fast');
    //$('.portfoliocontainer').masonry('reloadItems');
    setTimeout(function(){ $container.masonry() }, 400);
}