前言:瀑布流的效果,頁面都是由很多數據塊(這裏將數據塊分爲多列)組成,每個數據塊的高度不一樣,
瀏覽器下拉後數據都是從高度最小列最先展示在用戶面前;
實例:http://miiee.taobao.com/choice.htm?pcid=8106&cid=8106001
1、首先獲取每列的高度,保存在一個數組中,然後求數組中最小項的值
function minIndexOf( array ) { var arr = array || [], len = arr.length, index; if ( len > 0 ) { index = 0; if ( len === 1 ) { return index; } for ( var i = 1; i < len; i++ ) { if ( arr[index] > arr[i] ) { index = i; } } } return -1; } var columns_h = []; // 保存列高 var minIdx = minIndexOf(columns_h); var min_h = columns_h[minIdx]; // 求數組中最小項的值
2、(滾動條下拉)判斷什麼時候再次請求數據
// 當瀏覽器 視口高度+scrollTop 大於等於 最小列的底部位置時,再次請求數據 function scrollEvent () { var scrollTop = $(window).scrollTop(); var viewH = $(window).height(); // 在resize事件中更新 var dynamicVal = scrollTop + viewH; var columns_postop = $(selector).offset().top; var referenceVal = columns_postop + min_h; if ( dynamicVal >= referenceVal ) { // 再次請求ajax } }
3、循環處理數據,每插入一個數據塊,需要更新min_h,這樣每次插入都是最先插入到高度最小列中
function handleLoopData ( start, end ) { // var itemList; 假設這是數據集合 if ( var i = start; i < end; i++ ) { var itemObj = itemList[i]; if ( itemObj != undefined ) { // 結合HTML,將數據插入到高度最小列中,最小列根據min_h來判斷 // do something // 再次更新min_h的值 } } }
優化:
1、ajax請求返回的數據可以分批插入到頁面中,利用 handleLoopData函數的兩個參數;
2、在處理圖片時,可以先將url地址設置在img標籤的一個屬性中,CSS可以將圖片父容器背景設置爲一個加載的gif,當圖片加載完畢後,再將該地址填入到img標籤的src中。
// 修改一下handleLoopData函數中代碼 if ( itemObj != undefined ) { // 結合HTML,將數據插入到高度最小列中,最小列根據min_h來判斷 // do something // 再次更新min_h的值 // 假如將url地址設置爲img標籤的data-url中 var $targetSingle; // 目標數據塊,即插入到高度最小列的元素 // 圖片加載完畢後,將其地址設置爲對應容器的src中 var imgURL = $targetSingle.find('img'); var img = new Image(); var dataImg = $(img).data('dataObj', $targetSingle); // 監聽load事件 dataImg.bind('load', function(){ var dataObj = $(this).data('dataObj'); imgUrl = dataObj.find('img').attr('data-url'); dataObj.find('img').attr('src', imgUrl); }); img.src = imgUrl; }
本文轉載於http://www.cnblogs.com,由看看電影提供。