小猿圈JavaScript瀑布流效果

時間 2019-12-19

標籤 javascript 瀑布效果欄目 JavaScript 简体版

原文原文鏈接

在寫一個JavaScript效果的時候必定要知道他的實現邏輯，下次在寫這種東西的時候邏輯在，基本不少均可以實現了。那麼下面小猿圈就針對於JavaScript瀑布流效果的代碼邏輯分析一波：css

1. 先把頁面佈局調整好，html代碼以下：html

<!DOCTYPE html>前端

<html>web

<head>數組

<title>Title</title>dom

</head>函數

*{margin:0;padding:0}學習

#main{

margin:15px auto;

position: relative;

}

.box{

padding:15px 0 0 15px;

float:left;

}

.pic{

padding:15px;

border:1px solid #ccc;

box-shadow: 0 0 5px #ccc;

border-radius: 5%;

}

.pic img{

width:168px;

}

</style>

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

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

複製了html打開頁面後，會發現，頗有地方有空白，是由於浮動致使的，下面我們就用js來實現瀑布流效果。

2. 在js中寫入waterfall函數，爲了實現2次調用

a)刷新頁面加載一次。

b)拖動滾動條的時候加載一次。

3. 添加window.onscroll添加滾動條事件（由於下拉的時候圖片也要無縫隙）

4.下面就是邏輯操做了，具體看代碼吧，順便給你一個視頻教程。

JavaScript瀑布流效果視頻教程

window.onload = function(){

waterfall("main","box");

var dataImg = {

arr:[

{"src":"1.jpg"},

{"src":"2.jpg"},

{"src":"3.jpg"},

{"src":"4.jpg"},

{"src":"5.jpg"},

{"src":"6.jpg"}

]

}

window.onscroll = function(){

if(scrollTop()){

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

var main = document.getElementById("main");

var oDiv = document.createElement("div");

oDiv.className = "box";

var oPic = document.createElement("div");

oPic.className = "pic";

var imgs = document.createElement("img");

imgs.src = "images/"+dataImg.arr[i].src+"";

main.appendChild(oDiv);

oDiv.appendChild(oPic);

oPic.appendChild(imgs);

}

waterfall("main","box");

}

function scrollTop(){

var oBox = getClass("box");

var oBoxlast = oBox[oBox.length-1];

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

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

if(oBoxlast.offsetHeight/2+oBoxlast.offsetTop < top+height){

return true;

}else{

return false;

}

function waterfall(parent,box){

var oParent = document.getElementById(parent);

//獲取到父節點

var oBox = getClass(box);

//獲取到box子節點

var width = document.documentElement.clientWidth || document.body.clientWidth;

//可視區域的寬度值

var oBoxWidth = oBox[0].offsetWidth;

//獲取圖片的寬度

var num = Math.floor(width/oBoxWidth);

//獲取可視區域，一行能放入幾張圖片

oParent.style.width = num*oBoxWidth+"px";

//設置父節點的寬度

var hrr= [];

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

if(i<num){

hrr.push(oBox[i].offsetHeight);

}else{

var min=Math.min.apply(null,hrr);

var index = inArray(hrr,min);

oBox[i].style.position = "absolute";

oBox[i].style.left = index*oBoxWidth+"px";

//設置圖片擺放left值 = 最小高度的下標*圖片的寬度

oBox[i].style.top = min+"px";

//設置圖片擺放的top值 = 最小值（上面）圖片的高度;

hrr[index] += oBox[i].offsetHeight;

}

console.log(hrr);

}

function inArray(hrr,min){

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

if(hrr[i] == min){

return i;

}

function getClass(box){ //獲取class名稱節點的函數

//1》把頁面上全部的節點獲取到

//2》循環遍歷全部節點，進行條件判斷，

//3》符合要求的節點放入到數組中

var doms = document.getElementsByTagName("*");

var reg = new RegExp("\\b"+box+"\\b");

var arr = [];

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

if( reg.test( doms[i].className ) ){

arr.push(doms[i]);

}

return arr;

}

對於今天的文章感受怎麼樣，是否對於JavaScript瀑布流效果有了新的認識呢，對往後從事前端行業是否是也有了更大的信心，想學習web前端就要先了解是怎樣工做的，這樣才能針對本身不足的地方進行學習，小猿圈web前端講師提醒，學習需堅持，遇到不會的要及時找老師解決或者到小猿圈上面找答案。

相關標籤/搜索

每日一句

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