javascript - Masonry reload & reloadItems not working - Stack Overflow

admin管理员组

文章数量:1294321

The masonry (v3) code:

$(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.

$('.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 :(

The masonry (v3) code:

$(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.

$('.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 :(

• javascript
• jquery
• jquery-masonry

Share Follow edited Jun 30, 2013 at 21:16 Andrew Squire asked Jun 30, 2013 at 21:03 Andrew SquireAndrew Squire 14511 gold badge11 silver badge1717 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

If anyone else encounters this problem it's probably because you applied the masonry initialization to your container variable. It's working great now :)

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

本文标签： javascriptMasonry reload amp reloadItems not workingStack Overflow