Samsung 点击访问三星官网，你会发现下面的瀑布流网格效果非常不错，这里分享一个jQuery插件，使用Masonry和CSS animations来实现这种效果。不客气，那去吧！

使用教程

JS引入
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/colorfinder-1.1.js"></script>
<script src="js/gridScrollFx.js"></script>


添加示例HTML代码如下
<ul class="grid swipe-right" id="grid">
<li class="title-box">
<h2>Illustrations by <a href="http://ryotakemasa.com/">Ryo Takemasa</a></h2>
</li>
<li><a href="#"><img src="img/dummy.png" alt="dummy"><h3>A fantastic title</h3></a></li>
<li><a href="#"><img src="img/dummy.png" alt="dummy"><h3>A fantastic title</h3></a></li>
...
<li><a href="#"><img src="img/dummy.png" alt="dummy"><h3>A fantastic title</h3></a></li>
<li><a href="#"><img src="img/dummy.png" alt="dummy"><h3>A fantastic title</h3></a></li>
<li><a href="#"><img src="img/dummy.png" alt="dummy"><h3>A fantastic title</h3></a></li>
</ul>
</section>

实例化页面
<script>
new GridScrollFx( document.getElementById( 'grid' ), {
viewportFactor : 0.4
} );
</script>

在线预览 网盘下载

原创文章，转载请注明来自：http://www.bluestep.cc/?p=3123