管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

jQuery瀑布流插件Wookmark使用实例

　　插件下载：https://github.com/GBKS/Wookmark-jQuery

　　官方主页：http://www.wookmark.com/jquery-plugin

　　下载插件后，在网页中引用插件的JS文件：

　　

复制代码 代码如下:

　　<script src="jquery-1.8.2.min.js"></script>

　　<script src="jquery.wookmark.min.js"></script>

　　HTML代码结构：

　　

复制代码 代码如下:
<div id="main">

　　<ul id="tiles">

　　<li><img src="images/1.jpg"></li>

　　<li><img src="images/2.jpg"></li>

　　<li><img src="images/3.jpg"></li>

　　</ul>

　　</div>

　　简单用法：在html文件中添加代码

　　

复制代码 代码如下:
<script>

　　jQuery(function($){

　　$('#tiles li').wookmark();

　　});

　　</script>

　　复杂一点的用法：

　　

复制代码 代码如下:
<script>

　　jQuery(function($){

　　$('#tiles li').wookmark({ //这里是要实现瀑布流布局的对象

　　autoResize: true, //设置成true表示当window窗口大小改变的时候，重新布局

　　container: $('#container'), //这个是容器名称 这个容器要必须包含一个css属性"position:relative" 否则你就会看到全部挤在页面的左上角了

　　offset: 12, //2个相邻元素之间的间距

　　itemWidth: 222, //指定对象的宽度

　　resizeDelay: 50 //这是延时效果 默认是50

　　});

　　});

　　</script>

　　wookmark同样也可以配合ajax来实现动态加载数据，不过新增之后需要重新执行一次。

　　

复制代码 代码如下:
var handler = $('#tiles li');

　　handler.wookmark(options);

　　如果你在前面已经绑定了事件，在重新执行之前，先清除一下。

　　

复制代码 代码如下:
handler.wookmarkClear();

　　看到比较多人在问滚动加载是怎么用的，弄个实例补充说明下：

　　

复制代码 代码如下:
var handler = null;

　　//定义基本属性.

　　var options = {

　　autoResize: true,

　　container: $('#main'),

　　offset: 2,

　　itemWidth: 210

　　};

　　//定义滚动函数

　　function onScroll(event) {

　　//是否到底部（这里是判断离底部还有100px开始载入数据）.

　　var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);

　　if(closeToBottom) {

　　//这里就是AJAX载入的数据

　　$.ajax({url:"data.html", dataType:"html", success:function(html){

　　//把新数据追加到对象中

　　$('#waterfall').append(html);

　　//清除原来的定位

　　if(handler) handler.wookmarkClear();

　　//创建新的wookmark对象

　　handler = $('#waterfall li');

　　handler.wookmark(options);

　　}

　　});

　　}

　　};

　　$(document).ready(new function() {

　　//绑定scroll事件.

　　$(document).bind('scroll', onScroll);

　　//第一次布局.

　　handler = $('#waterfall li');

　　handler.wookmark(options);

　　});

教程首页 更多教程