砌体(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');
}
有什么建议吗?在过去的一周里,我一直在用不同的方法让它发挥作用,但我仍然没有得到任何运气:(
我终于彻底解决了这个问题。
$(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').masonary()
如果其他人遇到这个问题,那可能是因为您对容器变量应用了砖石初始化。它现在工作得很好:)
我也遇到过同样的问题。可能是我的解决方案效率不高,但到目前为止,每当我得到最佳解决方案时,我都会使用它。你可以试试这个,希望它对你也有帮助。
$('.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);
}