muuriとlazysizesを使ったpinterest風サイト

masonary等を扱えるmuuriと遅延読み込みを行えるlazysizesでpintereset風のサイトにする。
infinite scrollを使わずに画像を遅延読み込みにするのがミソ。
またmuuriとlazysizesはMIT Licenseなのもよい。

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.0.1/lazysizes.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/muuri/0.5.3/muuri.min.js"></script>

<div id="container" class="large-12 columns transitions-enabled large-centered clearfix">
  <img class="img-rounded lazyload" src="no_image.png" data-src="test1.png">
  <img class="img-rounded lazyload" src="no_image.png" data-src="test2.png">
  <img class="img-rounded lazyload" src="no_image.png" data-src="test3.png">
</div>

<script>
$(window).load(function(){
lazySizesConfig.loadMode = 1;

  var grid = new Muuri('#container');

  document.addEventListener('lazyloaded', function(e){
    grid.refreshItems().layout();
  });
});
</script>

さすがにアイテム数が増えすぎるとmuuriが処理しきれなくなる。