javascript 砌体重新加载和重新加载项目不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17394833/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Masonry reload & reloadItems not working
提问by Andrew Squire
The masonry (v3) code:
砌体（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;}
});
});
My masonry container (aka my portfolio)
我的砖石容器（又名我的投资组合）
<div id="portfoliocontent" class="portfoliocontainer"></div>
My goal here is to hide all the divs with the class 'designshwr' which works, however the reload of masonry isn't working at all.
我的目标是用有效的类“designshwr”隐藏所有 div，但是重新加载砌体根本不起作用。
$('.engineeringiC').click(function(){
if($('div.item').hasClass('designshwr')){
$('div.item.designshwr').hide('fast');
$('.portfoliocontainer').masonry('reloadItems');
}
}
Any suggestions? I've been scratching my head for the past week at different ways to get it to work, and I still haven't gotten any luck on it :(
有什么建议？在过去的一周里，我一直在用不同的方式让它工作，但我仍然没有得到任何运气:(
采纳答案by Andrew Squire
I finally resolved the issue in it's entirety.
我终于彻底解决了这个问题。
$(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();
var $container = $('#portfoliocontent') .masonry();
If anyone else encounters this problem it's probably because you applied the masonry initialization to your container variable. It's working great now :)
如果其他人遇到此问题，可能是因为您将砌体初始化应用于容器变量。现在效果很好:)
回答by Roopendra
I have faced same problem . May be my solution not efficient but whenever i have got optimum solution till now I have used this. You can try this hopefully it will helps to you as well.
我遇到了同样的问题。可能是我的解决方案效率不高，但是到目前为止，每当我获得最佳解决方案时，我都会使用它。你可以试试这个，希望它对你也有帮助。
$('.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);
}
