Question

我的网站上有砌体布局，但是当我加载页面时，图像会“堆积”在彼此之上。当你重新加载页面几次它变得更好，但仍然没有显示它应该。这是显示砌体图像的页面的链接。 http://vanillaphotography.co.za/weddings/

然而，我没有发现任何错误，这几个月来一直是一个令人头痛的问题。我使用ImagesLoaded插件修复了同样的问题，但现在即使这样也行不通。

这是我的jQuery：

   $(document).ready(function() {

/******/
//masonry
var $container = $('.portfolio_container');
// initialize Masonry after all images have loaded  
$container.imagesLoaded( function() {
  $('.portfolio_container').fadeIn();
  $container.masonry({
      columnWidth: 278,
      itemSelector: '.masonry-entry'
    });
});

// infinitescroll() is called on the element that surrounds 
// the items you will be loading more of
  $('.portfolio_container').infinitescroll({

    navSelector  : ".navigation",            
                   // selector for the paged navigation (it will be hidden)
    nextSelector : ".navigation a:first",    
                   // selector for the NEXT link (to page 2)
    itemSelector : ".portfolio_container .masonry-entry"          
                   // selector for all items you'll retrieve

  },
  // trigger Masonry as a callback
  function( newElements ) {
     var $newElems = jQuery( newElements ).hide(); // hide to begin with

     $container.imagesLoaded( function() {
        $newElems.fadeIn(); // fade in when ready
        $container.masonry( 'appended', $newElems );
    });
  });

//jQuery(".masonry-entry").find('img').parent().parent().parent().addClass('white');
    jQuery(".single-format-standard .entry-content img").wrap("<div class='img-wrap'></div>");
});

Answer 1

main.js中有错误，请尝试下面的代码。

替换此

//masonry
    var $container = $('.portfolio_container');
    // initialize Masonry after all images have loaded  
    $container.imagesLoaded( function() {
      $('.portfolio_container').fadeIn();
      $container.masonry({
          columnWidth: 278,
          itemSelector: '.masonry-entry'
        });
    });

用

$(function(){

    var $container = $('.portfolio_container');
    $container.imagesLoaded( function() {
        $container.masonry();
    });


});

Jquery砌体图像堆叠在页面顶部

1 个答案: