bootstrap+imagesLoaded+masonry+carouse瀑布流、轮播图

 

介绍

masonry是js瀑布流插件，imagesLoaded可实现对图像加载状态的事件处理。选用masonry是因为此框架不仅适用于img标签，可直接用于div标签，可更好地和bootstrap组合使用。Carouse是bootstrap插件可以实现轮播图效果。下面适用于bootstrap3

瀑布流范例

html代码

<div id="masonry-images" class="row">
  <div class="col-md-4 masonry-item">
    <div class="fh5co-blog animate-box">
      <a class="blog-bg" style="background-image: url(images/portfolio-1.jpg);"></a>
    </div>
  </div>
  <div class="col-md-4 masonry-item">
    <div class="fh5co-blog animate-box">
      <a class="blog-bg" style="background-image: url(images/portfolio-1.jpg);"></a>
    </div>
  </div>
  <div class="col-md-4 masonry-item">
    <div class="fh5co-blog animate-box">
      <a class="blog-bg" style="background-image: url(images/portfolio-1.jpg);"></a>
    </div>
  </div>
  <div class="col-md-4 masonry-item">
    <div class="fh5co-blog animate-box">
      <a class="blog-bg" style="background-image: url(images/portfolio-1.jpg);"></a>
    </div>
  </div>
  <div class="col-md-4 masonry-item">
    <div class="fh5co-blog animate-