用于实现瀑布流图的jQuery插件

来源:互联网 发布:网络作家的生活 编辑:程序博客网 时间:2024/06/06 13:10

这是我前两天写的一个用于实现瀑布流图的jQuery插件。

原理参见:http://blog.csdn.net/sornets/article/details/46883447


功能需求:

  • 用户自定义列宽(默认为200,单位:px);
  • 用户自定义列数(默认为4,单位:列);
  • 用户自定义瀑布流子元素类名(默认为waterDiv);
  • 用户自定义瀑布流子元素垂直间距(默认为20,单位:px);
  • 自动计算列之间的间距;
  • 用户自定义总宽度(默认自动获取);
  • 用户自定义aJax模块(未实现,若要使用需要自行在代码中修改ajax模块中的url等参数以及success函数。);
Demo下载:

Demo文件


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"}])


1 0
原创粉丝点击