瀑布流布局
ajax-瀑布流布局

實現(xiàn)思路

• 首先發(fā)送ajax請求獲取數(shù)據(jù)，對獲取到的數(shù)據(jù)采用瀑布流布局
• 當頁面滾動到了底部時，發(fā)送一個請求給服務器，用于獲取數(shù)據(jù)，獲取到數(shù)據(jù)后再對數(shù)據(jù)采用使用瀑布流布局

瀑布流布局實現(xiàn)思路

• 獲取列數(shù)（通過容器的寬度除以每列的寬度就等于h數(shù)）
• 設置一個數(shù)組，用于存儲每一列的高度，數(shù)組長度為列數(shù)，先將各個元素的值初始化為0
• 當有新數(shù)據(jù)到來時，遍歷數(shù)組中的所有項，取得高度最小的那一列，然后將新數(shù)據(jù)放在高度最小的那一列中，并更新數(shù)組

判斷頁面滾動到了底部

有兩種方式來判斷：

• 方法1
  該方法有兼容性問題，各瀏覽器對于offsetHeight 的解釋不同，需要進行測試，chrome下測試沒有問題
  代碼：

   window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        getData(renderPage);
    }
  };
  

• 方法2
  在html中文檔的最后添加一個標簽，將該標簽loadMore設置為hidden，當頁面滾動時，判斷該標簽是否出現(xiàn)在可視窗口，如果出現(xiàn)了，則說明頁面滾動到了底部，
  判斷方法：當窗口滾動的高度（scrollTop） + 窗口的高度（window.innerHeight） 大于 loadMore標簽在頁面的偏移高度（ $loadMore.offset().top;）
  代碼：

  // html
 .load-more{
      visibility: hidden;
      margin: 3px;
      height: 3px;
    }
// js

function isVisible(){
  var scrollTop = $(window).scrollTop(),
      winH = window.innerHeight;
      offsetTop = $loadMore.offset().top;
  if (offsetTop < scrollTop + winH){
    return true;
  } else {
    return false;
  }
}

注意點

• 頁面中的各個列使用的是position: absolute絕對定位，導致它們的包裹容器脫離了普通文檔流，因此，當有新的內(nèi)容加入時，需要手動設置它的包裹容器的高度為所有列中的最高高度
• 圖片資源的加載
  當接收到服務器端的數(shù)據(jù)時，因為網(wǎng)絡原因，可能導致圖片資源不能立馬加載完成，所以，在實際編碼中，先創(chuàng)建節(jié)點資源，等待圖片資源加載完成后，再將節(jié)點插入到頁面中；或者可以考慮使用預加載方式。
  在下面的代碼中，我們通過判斷節(jié)點的img是否加載完成，如果加載完成了就將其插入到頁面中；
  代碼：

$node.find('img').load(function(){
      insertNode($node);
      pinterestLayout($node);
      isDataArrive = true;
    });