wordpressinfinite-scrollmasonryimagesloaded

Black Stripes below Masonry Items

Hej,

I'm facing problems in my masonry project: Oliver Rath

There is an unintended black stripe below each item, please have a look at the screenshot:

enter image description here

I already tried the usual suggestions, such as manipulating the display or the padding value. Does anyone know hot to get rid of this?

Here is my JS so far:

var $container = $('#masonry');
// layout Masonry again after all images have loaded
$container.imagesLoaded( function() {
  $container.masonry({
   columnWidth: function(containerWidth){
                       return containerWidth / 3;
                   },
    isAnimated: false,
  });
});




$container.infinitescroll({
      debug: true,
      navSelector  : '.item-nav',
      nextSelector : '.older a',
      itemSelector : '.item',
      bufferPx: 200,
      extraScrollPX: 100,
      loadingText: '... loading more awesomess....',
      loading: {
          finishedMsg: 'Congrats. You have reached the end of the internet.',
          img: 'http://oliver-rath.com/wp-content/uploads/2015/05/15.png'
        }
      },
      function( newElements ) {
        var $newElems = $( newElements ).hide();
        // zoomBilder();
        $newElems.imagesLoaded(function(){
          $newElems.fadeIn();
          $container.masonry( 'appended', $newElems, true );

        });
      }
    );

Thanks in advance.

Solution

  • Actually it was a missing float: left; statement. Embarrassing :)