分析老師的瀑布流

時間 2019-11-17

原文原文鏈接

設計這個瀑布流的樣式就是全部圖片寬度相同，高度不一樣，獲得屏幕的寬度（這裏爲了讓點擊放大縮小屏幕的時候不至於讓樣式亂跳，圖片移位，因此不使用document.documentElement.clientWidth而是用屏幕分辨率的寬度，window.screen.width） css

先把整個外層Div設置成相對定位，而後裏面每一個包裹圖片的Div才能夠設置成絕對定位。咱們首先要根據屏幕寬度和圖片的寬度來肯定每一行能放幾張圖片。html

時咱們須要本身寫兩個方法，(因爲瀑布流無限加載事件是由滾動條事件觸發，每次滾動的時候當數組裏的最後一張圖片離頁首的高度加自身高度的一半小於頁首到屏幕自身高度時，咱們給往外層Div裏扔小Div(白話就是你看到的最後一張圖的一半高度的時候，我已經往下繼續給添加圖片了【實例1】))api

第一個是根據外層div和類標籤名獲取裏面全部對應子元素的數組。數組

function getClassObj(parent,name){瀏覽器

var elements=parent.getElementByTagName("*")app

var arrayBox=[];ide

for (var i = 0; i < oElements.length; i++) {函數

if (oElements[i].className==clsName) {ui

boxArr.push(oElements[i]);spa

}

return arrayBox;

}

第二個方法找出數組裏最小值在數組裏的索引

function getminHIndex(arr, number) {

var index = 0;

for (var i = 0; i < arr.length; i++) {

if (arr[i]==number) {

index = i;

}

return index;

}

第一排div裏的圖片(好比01.jpg,02.jpg,03.jpg)直接扔數組裏面讓自動顯示而後從第二排開始每張圖片都要設置絕對定位。

由於圖片都是左浮動，因此要找到第一排在數組中最小高度的第一個圖片03，再把第二排的第一個圖片04（由於是左浮動因此04位置排到從上開始第一個未佔滿的位置）排列到03

其下，而後設這04的絕對定位（div數組[i].style.position=」 absolute」

apin[i].style.top = 03. offsetHeight（高度）

apin[i].style.left =03. offsetLeft ;（寬度）

由於存放圖片高度的數組heightArray[01height,02height,03height] ，咱們只需用到第一排的圖片的高度值,因此我裏面只放第一排的三個值。而後找到第一排圖片裏高度最小的值03，把存放div的數組divArray裏的下一張圖片04排列到03下面，而後再把03的高度更改成03+04的高度，那麼再循環找數組裏高度最小值就是02了，而後再把下一張圖片05排列到02下面，設置絕對定位。最後把02在數組裏的高度值更改成02=02+05，而後再循環數組裏高度最小值就是01了，而後06再排列到01下面，再改變01數組裏的高度，依次類推。

---------------------------------------------------------------------------------------------------------------------------------

實例1

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//scrollTop 爲垂直滾動條已經滾動的高度，能夠理解爲網頁頭部不可見部分的高度（一開始爲0，下拉滾動條時，scrollTop變大）

var documentH = document.documentElement.clientHeight;//這是看得見的頁面高度

而後放具體代碼：

Js代碼：

window.onload = function() {

waterfall('main', 'pin');

var dataInt = { 'data': [{ 'src': '94.jpg' }, { 'src': '95.jpg' }, { 'src': '96.jpg' }, { 'src': '97.jpg' }] };

window.onscroll = function() {

if (checkscrollside()) {

var oParent = document.getElementById('main'); //父級對象

for (var i = 0; i < dataInt.data.length; i++) {

var oPin = document.createElement('div'); //添加元素節點

oPin.className = 'pin';

oParent.appendChild(oPin);

var oBox = document.createElement('div');

oBox.className = 'box';

oPin.appendChild(oBox);

var oImg = document.createElement('img');

oImg.src = 'images/' + dataInt.data[i].src;

oBox.appendChild(oImg);

}

waterfall('main', 'pin');

}

};

parent父級id

pin 元素id

function waterfall(parent,pin) {

var oParent = document.getElementById(parent);

var apin = getClassObj(oParent, pin);//獲取存儲塊框的pin的數組apin

var iPinW = apin[0].offsetWidth;//一個快框的寬

var num = Math.floor(window.screen.width/ iPinW);//每行中能容納的pin個數

oParent.style.cssText = 'width:' + iPinW * num + "px;margin:0px auto;";//若是不用改屬性，那麼會出現一種狀況，當

//瀏覽器隨着窗口縮小，顯示的內容頁隨之減小，沒有滾動條的出現。

var pinHArr = [];//用於存儲每列中的全部塊框相加的高度。

for (var i = 0; i <apin.length; i++) {

var pinH = apin[i].offsetHeight;//元素的高度

if (i<num) {

pinHArr[i] = pinH;//第一行中的num個塊框pin先添加進數組pinHArr

} else { //找出數組中最小的值minH

var minH = Math.min.apply(null, pinHArr);//數組pinHArr的最小值minH

var minHIndex = getminHIndex(pinHArr, minH);

apin[i].style.position = 'absolute';//設置絕對位移

apin[i].style.top = minH + "px";

apin[i].style.left = apin[minHIndex].offsetLeft + "px";

//數組最小元素的高+天機上的apin[i]塊框高

pinHArr[minHIndex] += apin[i].offsetHeight;

}

//找出最小值在數組中的索引

function getminHIndex(arr, number) {

var index = 0;

for (var i = 0; i < arr.length; i++) {

if (arr[i]==number) {

index = i;

}

return index;

}

function getClassObj(parent,clsName) {

var oElements = parent.getElementsByTagName('*');//獲取父級的全部子集

var boxArr = [];

for (var i = 0; i < oElements.length; i++) {

if (oElements[i].className==clsName) {

boxArr.push(oElements[i]);

}

return boxArr;

}

function checkscrollside() {

var oParent = document.getElementById('main');

var apin = getClassObj(oParent, 'pin');

//建立觸發添加塊函數waterfall()高度：最後一個塊框的距離網頁頂部+自身高的一半（實現未滾動到底就開始加載）

var lastPinH = apin[apin.length - 1].offsetTop + Math.floor(apin[apin.length - 1].offsetHeight / 2);

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//滾動條滑動了多少像素

var documentH = document.documentElement.clientHeight;//頁面高度

return (lastPinH < scrollTop + documentH) ? true : false;

}

Html源代碼：

<!DOCTYPE html>

<head>

*{padding: 0;margin:0;}

#main {

position: relative;/*相對定位：絕對定位的參照物體，再也不參照body*/

}

.pin {

padding: 15px 0px 0px 15px;

float: left;

}

.box {

padding: 10px;

border: 1px solid #ccc;

box-shadow: 0px 0px 6px #ccc;

border-radius: 5px;

}

.box img {

width: 230px;

height: auto;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。