插件下載:https://github.com/GBKS/Wookmark-jQuery
官方主頁:
下載插件后,在網(wǎng)頁中引用插件的JS文件:
復(fù)制代碼 代碼如下:
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.wookmark.min.js"></script>
復(fù)制代碼 代碼如下:
<div>
<ul>
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
</ul>
</div>
復(fù)制代碼 代碼如下:
<script>
jQuery(function($){
$('#tiles li').wookmark();
});
</script>
復(fù)制代碼 代碼如下:
<script>
jQuery(function($){
$('#tiles li').wookmark({ //這里是要實(shí)現(xiàn)瀑布流布局的對(duì)象
autoResize: true, //設(shè)置成true表示當(dāng)window窗口大小改變的時(shí)候,重新布局
container: $('#container'), //這個(gè)是容器名稱 這個(gè)容器要必須包含一個(gè)css屬性"position:relative" 否則你就會(huì)看到全部擠在頁面的左上角了
offset: 12, //2個(gè)相鄰元素之間的間距
itemWidth: 222, //指定對(duì)象的寬度
resizeDelay: 50 //這是延時(shí)效果 默認(rèn)是50
});
});
</script>
復(fù)制代碼 代碼如下:
var handler = $('#tiles li');
handler.wookmark(options);
復(fù)制代碼 代碼如下:
handler.wookmarkClear();
復(fù)制代碼 代碼如下:
var handler = null;
//定義基本屬性.
var options = {
autoResize: true,
container: $('#main'),
offset: 2,
itemWidth: 210
};
//定義滾動(dòng)函數(shù)
function onScroll(event) {
//是否到底部(這里是判斷離底部還有100px開始載入數(shù)據(jù)).
var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
if(closeToBottom) {
//這里就是AJAX載入的數(shù)據(jù)
$.ajax({url:"data.html", dataType:"html", success:function(html){
//把新數(shù)據(jù)追加到對(duì)象中
$('#waterfall').append(html);
//清除原來的定位
if(handler) handler.wookmarkClear();
//創(chuàng)建新的wookmark對(duì)象
handler = $('#waterfall li');
handler.wookmark(options);
}
});
}
};
$(document).ready(new function() {
//綁定scroll事件.
$(document).bind('scroll', onScroll);
//第一次布局.
handler = $('#waterfall li');
handler.wookmark(options);
});
|
新聞熱點(diǎn)
疑難解答
圖片精選