And*_*ire 5 javascript jquery jquery-masonry
砌体(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;}
});
});
Run Code Online (Sandbox Code Playgroud)
我的砌体容器(又名我的投资组合)
<div id="portfoliocontent" class="portfoliocontainer"></div>
Run Code Online (Sandbox Code Playgroud)
我的目标是隐藏所有的divs,类似'designshwr',但是砌体的重新加载根本不起作用.
$('.engineeringiC').click(function(){
if($('div.item').hasClass('designshwr')){
$('div.item.designshwr').hide('fast');
$('.portfoliocontainer').masonry('reloadItems');
Run Code Online (Sandbox Code Playgroud)
}
有什么建议?过去一周我一直在摸不着头脑以不同的方式让它发挥作用,我仍然没有任何运气:(
我终于彻底解决了这个问题。
$(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;}
});
});
Run Code Online (Sandbox Code Playgroud)
var $container = $('#portfoliocontent') .masonry();
如果其他人遇到此问题,可能是因为您将砌体初始化应用于容器变量。现在效果很好:)