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

<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>

<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>

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);
});