isotope + imageLoaded

imageLoaded

imagesLoaded是一款用于检测页面中的图片是否被加载的js插件。imagesLoaded是非常有用的插件，当你的页面中某幅图片没有被加载时，默认会显示一个红叉或图片alt文本，imagesLoaded可以将未加载的图片替换为你设置的图片。官网在这里。

引入：

<script src="http://cdn.bootcss.com/jquery.imagesloaded/4.1.3/imagesloaded.min.js"></script>

使用：

可以直接使用一个回调函数

$('#container').imagesLoaded( function() {
  // images have loaded
});

也可以预定义的方法来根据不同的图片加载情况执行回调函数：

$('#container').imagesLoaded()
  .always( function( instance ) {
    console.log('all images loaded');
  })
  .done( function( instance ) {
    console.log('all images successfully loaded');
  })
  .fail( function() {
    console.log('all images loaded, at least one is broken');
  })
  .progress( function( instance, image ) {
    var result = image.isLoaded ? 'loaded' : 'broken';
    console.log( 'image is ' + result + ' for ' + image.img.src );
  });

过多内容参考这里。

Isotope

Isotope是一款效果非常神奇的元素分类过滤和排序布局jQuery插件。Isotope是Masonry布局的作者David DeSandro的一款力作，该分类过滤和排序插件允许你以非常简单和炫酷的方式来隐藏和显示元素，以及对元素按照指定的规则进行排序。官网在这里。

如果在items中使用图片，而图片加载错误时Isotope的布局会发生错乱。解决这个问题的方法时使用imagesLoaded。imagesLoaded可以在所有的图片都被加载之后触发一个回调函数。

<script src="http://cdn.bootcss.com/jquery.isotope/3.0.4/isotope.pkgd.min.js"></script>
<script src="http://cdn.bootcss.com/jquery.imagesloaded/4.1.3/imagesloaded.min.js"></script>

使用：

// 案例图片初始化加载
  items.imagesLoaded(function () {
    items.isotope({
      itemSelector: '.item',
      layoutMode: 'fitRows',
      transitionDuration: '0.7s',
      filter: '.init',
      sortBy : 'original-order'
    });
  });

其中itemSelector为被挑选的排列的项目， 执行isotope方法的则是mSelector的父容器

对内容进行挑选排序时用到的是filter， 后面是要挑选显示的class，可以使用自定义属性来对对应class，例如

<ul id='items-nav' class="items-nav col-sm-12 col-xs-6">
    <li class="all active" data-filter="item"><span>所有案例</span></li>
    <li class="product" data-filter="product"><span>产品设计</span></li>
    <li class="brand"
    data-filter="brand"><span>品牌形象</span></li>
    <li class="cooperate" data-filter="cooperate"><span>合作开发</span></li>
</ul>

点击对应的li导航时执行下面的代码：

items.isotope({
    filter: '.init',
    sortBy : 'original-order'
});

还可以对项目筛选的同时进行排序，上面按照html排列顺序进行排序，也可以选择随机顺序或者指定的值进行排序，具体用法参考官网的说明。

更多内容也可以参考这里。