小白學習路之原生js實戰--瀑布流
阿新 • • 發佈：2018-12-12
瀑布流效果
這幾天看js視訊的時候學到一個用原生js實現瀑布流的方法。雖然程式碼有點難以理解，但多看幾遍實際操作一下還是有點意思。存個檔
- HTML部分程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js瀑布流</title>
<link rel="stylesheet" href="css/index.css">
<script type="text/javascript" src="js/index.js" - css部分程式碼
* {
margin: 0px;
padding: 0px;
}
#container {
position: relative;
}
.box {
padding: 5px; /*每張圖片的padding為5px，兩張圖片間的padding為10px*/
float: left;
}
.box_img {
padding: 5px;
border: 1px solid #cccccc;
box-shadow: 0 0 5px #ccc; /*設定陰影效果*/
border-radius: 5px;
}
.box_img img {
width: 200px; /*讓所有圖片寬度為200px，高度為自適應，這樣可以避免圖片變形*/
height: auto;
}
- js部分程式碼
// 載入函式，獲得螢幕有多少個圖片
window.onload = function(){
// 呼叫imgLocation函式
imgLocation("container","box");
//正常獲取資料的方式是通過伺服器獲取，在此我們僅採用傳入json資料的方式載入圖片
//定義json字串，進行模擬資料
var imgData = {"data":[{"src":"科比1.jpg"},{"src":"科比3.jpg"},{"src":"科比9.jpg"},{"src":"科比5.jpg"},{"src":"科比7.jpg"},{"src":"科比6.jpg"}]};
//監聽滾動條
window.onscroll = function(){
//如果checkFlag()函式返回true則執行載入工作
if(checkFlag()){
//得到當前根元素然後動態的給它載入子元素
var c_parent =document.getElementById("container");
for(var i=0;i<imgData.data.length;i++){
//建立類名為box的div，將其掛載在根元素下
var c_content = document.createElement("div");
c_content.className = "box";
c_parent.appendChild(c_content);
//建立類名為box_img的div，將其掛載在父元素下
var boximg = document.createElement("div");
boximg.className = "box_img";
c_content.appendChild(boximg);
var img = document.createElement("img");
img.src = "images/"+imgData.data[i].src;
boximg.appendChild(img);
}
imgLocation("container","box");
}
}
}
// 要想獲得有多少個圖片，就看有多少個div，用父級查詢子級空間
function imgLocation(parent,content){
//將parent下所有的content全部取出，即將container下的每一個box全部取出
var c_parent = document.getElementById(parent); //得到父級空間
//因為我們將parent傳給了c_parent，所以下面呼叫傳參的時候傳入c_parent
var c_content = getChildElement(c_parent,content);
//console.log(c_content); 列印審查有多少個box
//得到圖片的寬度
var imgWidth = c_content[0].offsetWidth;
//整個螢幕的寬度除以每個圖片的寬度，就是這個螢幕一排能放多少張圖片
var num = Math.floor(document.documentElement.clientWidth / imgWidth); //將小數轉換為整數，也可以使用parseInt
// console.log(num);
//固定螢幕的寬度和放圖片的個數，以至於再縮小螢幕大小後圖片的擺放位置不會改變
c_parent.style.cssText = "width:"+imgWidth*num+"px;margin:0 auto"; //用js修改css內容樣式,將container寬度固定並居中顯示
//接下來需要判斷一排中最矮的那張圖片
//先用一個數組儲存box的高度
var boxHeightArr = [];
for(var i = 0;i<c_content.length;i++){
if(i<num){
boxHeightArr[i] = c_content[i].offsetHeight; //將box的高度儲存在陣列中
}else{
//得到第一排的最小高度
var minHeight = Math.min.apply(null,boxHeightArr);
c_content[i].style.position = "absolute";
c_content[i].style.top = minHeight+"px";
var minLocation = getminHeightLocation(boxHeightArr,minHeight);
c_content[i].style.left = c_content[minLocation].offsetLeft+"px"; //將第二排的第一張圖片放置在第一排最矮圖片的位置的下面，如何找到這個最矮位置，就是當前最矮圖片距螢幕左邊的大小
boxHeightArr[minLocation] = boxHeightArr[minLocation]+c_content[i].offsetHeight; //當第二排的第一張圖片加到第一排最矮的圖片上以後，圖片總高度變為：最矮圖片高度+當前載入圖片高度
}
}
}
//寫一個函式來得到每排最小高度圖片的位置
function getminHeightLocation(boxHeightArr,minHeight){
for(var i in boxHeightArr){
if(boxHeightArr[i] == minHeight){
return i;
}
}
}
//用一個函式來獲取每一個子級空間
function getChildElement(parent,content){
//定義一個數組
var contentArr = [];
//通過父級空間得到所有的子級內容
var allcontent = parent.getElementsByTagName("*");
//用一個for迴圈將所有的子級內容放入陣列中
for(var i=0;i<allcontent.length;i++){
//判斷取出的內容是否與content相等，即是否與box相等
if(allcontent[i].className==content){
contentArr.push(allcontent[i]);
}
}
return contentArr;
}
//當滾動條拉到底部最後一張圖片出現之前繼續載入資料,用一個Boolean型表示，如果可以載入返回true
function checkFlag(){
var c_parent = document.getElementById("container");
var c_content = getChildElement(c_parent,"box");
//得到最後一張圖片的高度
var lastContentHeight = c_content[c_content.length-1].offsetTop;
//得到scrollTop（被隱藏在內容區域上方的畫素）的值
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //因為存在瀏覽器相容的問題，所以用body再獲取一次
//獲得當前頁面的高度
var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
//如果（當前頁面的高度+scrollTop的高度）>最後一張距頂的高度，則載入圖片
if((pageHeight+scrollTop)>lastContentHeight){
return true;
}
}
以上學習來自：極客學院