这是我前两天写的一个用于实现瀑布流图的jQuery插件。
原理参见:http://blog.csdn.net/sornets/article/details/46883447
功能需求:
- 用户自定义列宽(默认为200,单位:px);
- 用户自定义列数(默认为4,单位:列);
- 用户自定义瀑布流子元素类名(默认为waterDiv);
- 用户自定义瀑布流子元素垂直间距(默认为20,单位:px);
- 自动计算列之间的间距;
- 用户自定义总宽度(默认自动获取);
- 用户自定义aJax模块(未实现,若要使用需要自行在代码中修改ajax模块中的url等参数以及success函数。);
HTML格式:
<div id="s_waterFall">
<div class="waterDiv"></div>
<div class="waterDiv"></div>
<div class="waterDiv"></div>
<div class="waterDiv"></div>
</div>
父元素中id="s_waterFall"
不能少
Demo中json返回样例:
([{"id":"1","image":"1.png","title":"hello","info":"infoinfoinfo"},{"id":"2","image":"2.png","title":"title2","info":"infonifofnosdfjoasdf"}])