js實現瀑布流佈局

時間 2019-12-06

標籤實現瀑布佈局欄目 JavaScript 简体版

原文原文鏈接

html：css

<!doctype html>html

<html>node

<head>數組

<title>Document</title>函數

</head>htm

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

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

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

css：

body, div{

margin: 0;

padding: 0;

}

#walterfall{

height: auto;

position: relative;

}

.container{

float: left;

padding: 15px 0 0 15px;

}

.img{

padding: 10px;

border: 1px solid #ccc;

box-shadow: 0px 0px 5px gray;

}

img{

width: 190px;

}

js：

/**

* Created by ll0u on 1/7/2015.

var data = {imgs:

[

{url: 'imgs/28.jpg'},

{url: 'imgs/29.jpg'},

{url: 'imgs/30.jpg'},

{url: 'imgs/31.jpg'},

{url: 'imgs/32.jpg'}

]

}

window.onload = function(){

walterFall('walterfall', 'container');

//滾動加載圖片

window.onscroll = function(){

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

var listNode= getEByClass(oParent, 'container');

if(checkLoad()){

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

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

containerNode.className = 'container';

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

imgNode.className = 'img';

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

img.src = data.imgs[i].url;

imgNode.appendChild(img);

containerNode.appendChild(imgNode);

oParent.appendChild(containerNode);

listNode.push(containerNode);

// walterFall('walterfall', 'container');

//計算新加載圖片的位置

listI++;

minH = Math.min.apply(null, columnsHArr);

var index = getIndex(columnsHArr, minH);

listNode[listI].style.cssText = 'position: absolute; top: ' + minH + 'px; left: ' + listNode[index].offsetLeft + 'px';

columnsHArr[index] += listNode[listI].offsetHeight;

}

}else{

}

//封裝瀑布流佈局函數

//存放每一列高度的數組

var columnsHArr = [];

//存放最小高度

var minH = 0;

var listI = 0;

function walterFall(parent, box){

//獲得屏幕寬度

var screenW = document.documentElement.offsetWidth;

var oParent = document.getElementById(parent);

//獲得class爲container的全部元素

var listNode= getEByClass(oParent, box);

//獲得container的寬度

var listNodeW = listNode[0].offsetWidth;

//獲得列數

var columns = Math.floor(screenW / listNodeW);

//設置大容器的css屬性

oParent.style.cssText = 'width: ' + (listNodeW*columns+15) + 'px; margin: 0 auto';

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

if(i < columns){

columnsHArr.push(listNode[i].offsetHeight);

}else{

listI = i;

minH = Math.min.apply(null, columnsHArr);

var index = getIndex(columnsHArr, minH);

listNode[i].style.cssText = 'position: absolute; top: ' + minH + 'px; left: ' + listNode[index].offsetLeft + 'px';

columnsHArr[index] += listNode[i].offsetHeight;

}

//封裝獲得class的函數

function getEByClass(node, className){

var nodeArr = [];

var allNode = node.getElementsByTagName('*');

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

if(allNode[i].className == className){

nodeArr.push(allNode[i]);

}

return nodeArr;

}

//封裝獲得最小高度列的索引值

function getIndex(columnsHArr, minH){

for(var i in columnsHArr){

if(columnsHArr[i] == minH){

return i;

}

//封裝是否加載圖片函數

function checkLoad(){

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

var listNode = getEByClass(oParent, 'container');

//屏幕高度

var screenH = document.documentElement.clientHeight || document.body.clientHeight;

//滾動條滾動高度

var scrollH = document.documentElement.scrollTop || document.body.scrollTop;

var height = screenH + scrollH;

//最後一張圖片距離頂部的高度

var lastT = listNode[listNode.length - 1].offsetTop + Math.round(listNode[listNode.length - 1].offsetHeight/2);

return lastT<height ? true : false;

}

相關標籤/搜索

每日一句

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