基于jquery,支持window-resize和ajax取数据;
测试通过ie6+,FF3+,chrome,safari;
github地址:
https://github.com/chembohuang/jquery.waterfall.plugin
demo地址:
http://paradise4ever.com/waterfall/demo.html
使用:
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.cb.waterfall.plugin.min.js"></script>
<script type="text/javascript">
$(function(){
$("#photo_wall").waterfall({
ajaxUrl :"ajaxData.txt", ////ajax url. e.g. /server/loadMorePics.php. return json data as {["src":"2.jpg","desc":"description","link":"#"],["src":"4.jpg","desc":"description","link":"#"]}
ajaxParams :{"count":20,"userId":30}, //ajax params. e.g. {"name":"chembo","loadPic":"10"}
ajaxCount :5, //the total times of the ajax will run when scroll hits the bottom. default to 4.
block_class :"ablock", //one block's width. default to ablock.
margin :3, //the margin between two blocks. unit is the px. default to 3.
block_width :230, //one block's width.
animate_duration:500 //jquery animate duration. unit is the million-second. default to 1000.
});
});
效果图:
- 大小: 142.9 KB
分享到:
相关推荐
Jquery 瀑布流插件
Jquery瀑布流插件
JQuery瀑布流插件Grid-A-Licious是一款简单易用的jQuery插件,可用于创建响应式瀑布流布局,针对不同设备可自动适应宽度。
响应式jquery瀑布流插件,不依赖第三方js,在前端页面特效中,值得收藏
jQuery瀑布流插件masonry实现的瀑布流布局网页,很不错的瀑布流插件,采用lightbox插件放大展示图片,非常的漂亮的布局。
jquery瀑布流插件
这是一个基于jQuery 瀑布流插件 压缩后代码 889 Byte 里面有源代码和注释。
jQuery瀑布流插件BlocksIt.zip
jQuery Wookmark瀑布流插件
Jquery网站瀑布流插件masonry是一款jquery.masonry插件。
jquery瀑布流插件
jquery瀑布流插件 响应式移动端PC端布局 jaliswall.js
JQuery wookmark 瀑布流代码实例,现在很流行的一种网页布局效果,瀑布流,随意、洒脱,个性十足,一种代表时尚潮流的网页设计风格。