四步轻便搞定瀑布流布局

四步轻松搞定瀑布流布局

　　今天我要分享给大家的就是怎么轻松来搞定瀑布流布局。当然，我不会自己从零开始，要学会重复利用别人的东西，不要重新发明轮子。如果要看本文最新版本，请访问：http://www.vktone.com/articles/waterfall-layout-use-jquery-masonry.html。（友情提示：本文内容在ITEYE上显示有点乱，最好访问这个地址看）

?

　　我用到的就是jQuery的Masonry插件，它是一个用来布局的jQuery插件。配置Masonry相当容易，只需要在jQuery脚本中的wrapping container元素中加上.masonry()方法。官网地址：http://masonry.desandro.com/index.html。

　　废话少说，下面来一步一步展示如何实现瀑布流布局，这个已经在www.vktone.com博客右侧边栏中用到了。

　　第一步：就是要把显示图片的html容器准备好，比如像下面这样

<div id="imgcontainer">  <div class="imgitem">...</div>  <div class="imgitem">...</div>  <div class="imgitem">...</div>  ...</div>
注意：<div class="imgitem">...</div> 里面装的就是你要显示的图片，也可以是带链接的图片，也可以是图片和文字的混合体。

　　第二步：加入jQuery和jQuery Masonry插件。

<script src="/path/to/jquery.min.js"></script><script src="/path/to/jquery.masonry.min.js"></script>
其中，jQuery下载地址：http://jquery.com/，
　　jQuery Masonry下载地址：http://masonry.desandro.com/jquery.masonry.min.js

　　第三步：添加css样式，特别注意要添加 float:left，其它的样式自行调整（比如添加边框border，边距margin等）。

.imgitem {??? /* width: 70px; */??? margin: 2px;??? float: left;??? border: solid 1px #ccc;??? -webkit-transition: all .7s ease-out .1s; -moz-transition: all .7s ease-out; -o-transition: all .7s ease-out .1s; transition: all .7s ease-out .1s;}

　　第四步：添加JavaScript脚本

<script type="text/javascript">//<![CDATA[function masonryImages(){??? var $container = $('#imgcontainer');??? $container.imagesLoaded(function(){??????? $container.masonry({??????????? itemSelector : '.imgitem'??????????? //,columnWidth: 72??????? });??? });}$(function(){??? masonryImages();});//]]></script>

　　注意：如果显示图片的html是ajax动态加载的，加载完之后应该调用masonry()重新布局，否则有点乱。比如下面的代码，在加载完之后调用了masonryImages()。

??? $.ajax({??????? url: "...",??????? type: "post",??????? data: {??????????? ...??????? },??????? dataType: "jsonp",??????? success: function(rsp){??????????? if (rsp && rsp.data && rsp.data.html) {??????????????? $("#sidebar").replaceWith(rsp.data.html);??????????????? masonryImages();??????????? }??????? },??????? error: function(){??????????? $("#sidebar").text("加载侧边失败！");??????? }??? });

　　大功告成！用jQuery Masonry插件实现瀑布流布局就完成了，轻松吧！

?

　　源文：http://www.vktone.com/articles/waterfall-layout-use-jquery-masonry.html

?

?