Masonry Grid With Bootstrap & Imagesloaded

- http://masonry.desandro.com/

** if u have lots of small images next to each other and you are having issue with the empty space, you should instead use the image as a bg of the div or element which have better consistency. “use the photos_mas_grid() below”

0- layout

<a href="//unpkg.com/masonry-layout@4.1/dist/masonry.pkgd.min.js">//unpkg.com/masonry-layout@4.1/dist/masonry.pkgd.min.js</a>
<a href="//npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js">//npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js</a>

1- view

<div class="grid">
  @foreach ($array as $one)
    <article class="grid-item col-xs-12 col-sm-6 col-md-4">
    ...
    </article>
  @endforeach
</div>

2- js

function mas_grid() {
  // init Masonry after all images have loaded
  // this is better for the empty spaces issue
  var $grid = $('.grid').imagesLoaded(function() {
    $grid.masonry({
      itemSelector: ".grid-item",
      columnWidth: ".grid-item",
      percentPosition: true,
      originLeft: false
    });
  });
}

function photos_mas_grid() {

  var $grid = $('.grid').masonry({
    itemSelector: ".grid-item",
    columnWidth: ".grid-item",
    percentPosition: true,
    originLeft: false
  });

  // layout Masonry after each image loads
  $grid.imagesLoaded().progress({ background: '.grid-item' },
    function() {
      $grid.masonry('layout');
    });
}

$(document).ready(function() {
  mas_grid();
});

// if you dont use turbo-links
// $(document).on('turbolinks:render', function() {   
//   mas_grid();
//   photos_mas_grid();
// });
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s