用JavaScript和jQuery實現瀑布流

▓▓▓▓▓▓ 大致介紹

在慕課網上學習了用原生js和jQuery實現瀑布流， 在這裡做個筆記

▓▓▓▓▓▓ 用JavaScript實現

基本結構：

... ... ...

基本樣式：

*{ margin: 0px; padding: 0px; } #main{ position: relative; } .box{ padding: 15px 0 0 15px; float: left; } .pic{ padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 5px #ccc; }

思路：

1、獲取#main下的所有.box

2、計算頁面中圖片有幾列， 並設置頁面的寬度

3、找出這幾列中高度最小的列

4、從第二行開始， 設置圖片為相對定位， 把一張圖片放到高度最小列的下面

5、更新列的高度， 重複3、4、5步驟， 直至圖片載入完

6、根據最後一張圖片的位置確定是否繼續載入圖片（懶載入）

實現：

1、獲取#main下的所有.box

//將main下的所有class為box的元素取出來 var oParent = document.getElementById(parent); var oBox = getByClass(oParent,box); // 根據class獲取元素 function getByClass(parent,clsname){ var arr = ;//用來存儲獲取到的所有class為box的元素 var oElement = parent.getElementsByTagName('*'); for(var i=0;i

2、計算頁面中圖片有幾列， 並設置頁面的寬度

//計算整個頁面顯示的列數（頁面寬/box的寬） var oBoxW = oBox[0].offsetWidth; var cols = Math.floor(document.documentElement.clientWidth/oBoxW); //設置main的寬 oParent.style.cssText = 'width:' + oBoxW*cols + 'px;margin:0 auto;'; //存儲每列的高度 var hArr = ; for(var i=0;i //獲取每列高度最小的索引值 function getMinIndex(arr,value){ for(var i in arr){ if(arr[i] == value){ return i; } } }

6、根據最後一張圖片的位置確定是否繼續載入圖片（懶載入）

假設是後臺給的資料

//資料 var dataInt = {'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};

當捲軸滾動時執行

//捲軸滾動時 window.onscroll = function{ scrollSlide(dataInt); }

根據最後一張圖片的位置， 來判斷是否進行載入

//判斷是否具有了滾條載入資料塊的條件 function checkScrollSlide(parent,clsname){ var oParent = document.getElementById(parent); var oBox = getByClass(oParent,clsname); var lastBoxH = oBox[oBox.length-1].offsetTop + Math.floor(oBox[oBox.length-1].offsetHeight/2); var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var height = document.documentElement.clientHeight || document.body.clientHeight; return (lastBoxH

載入圖片

//捲軸滾動時執行 function scrollSlide(dataInt){ ////判斷是否具有了滾條載入資料塊的條件 if(checkScrollSlide('main','box')){ var oParent = document.getElementById('main'); //將資料塊渲染到當前頁面的尾部 for(var i=0;i

▓▓▓▓▓▓ 用jQurey實現

用jQuery實現的思路都是一樣的， 就直接放代碼

$(window).on('load',function{ waterfall; var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]}; $(window).on('scroll',function{ scrollSlide(dataInt); }) }); function waterfall{ var $oBox = $('#main>div'); var oBoxW = $oBox.eq(0).outerWidth; var cols = Math.floor($(window).width/oBoxW); $('#main').css({ 'width' : cols * oBoxW, 'margin' : '0 auto' }); var hArr = ; $oBox.each(function(index,value){ var oBoxH = $oBox.eq(index).height; if(indexdiv').last; var lastBoxH = $lastBox.offset.top + Math.floor($lastBox.height/2); var scrollTop = $(window).scrollTop; var clientH = $(window).height; return (lastBoxH ').addClass('box').appendTo('#main'); var $Pic = $('').addClass('pic').appendTo($Box); $('').attr('src','images/' + $(value).attr('src')).appendTo($Pic); }) waterfall; } }