JavaScript實(shí)現(xiàn)瀑布流布局
更新時(shí)間：2016年01月12日 16:58:50 作者：Superpan2015
這篇文章主要介紹了原生JavaScript實(shí)現(xiàn)瀑布流布局的相關(guān)資料,實(shí)現(xiàn)鼠標(biāo)下拉圖片自動(dòng)加載效果，和百度圖片效果類似，需要的朋友可以參考下
本文實(shí)例講解了原生JavaScript實(shí)現(xiàn)瀑布流布局詳細(xì)代碼，分享給大家供大家參考，具體內(nèi)容如下
效果圖：
具體代碼：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div id="container">
<div class="box">
<div class="box_img"> <img src="images/1.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/2.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/3.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/4.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/5.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/6.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/7.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/8.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/9.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/10.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/1.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/2.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/3.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/4.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/5.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/6.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/7.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/8.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/9.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/10.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/1.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/2.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/3.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/4.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/5.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/6.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/7.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/8.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/9.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"> <img src="images/10.jpg" alt=""></div>
</div>
</div>
</body>
</html>
CSS代碼：
*{
margin: 0px;
padding: 0px;
}
#container{
position: relative;
}
.box{
padding: 5px;
float: left;
}
.box_img{
padding: 5px;
border: 1px solid #cccccc;
box-shadow: 0 0 5px #ccc;
border-radius: 5px;
}
.box_img img{
width: 150px;
height:auto;
}
js代碼：
window.onload=function(){
imgLocation("container","box");
var imgData={
"data":[
{"src":"2.jpg"},
{"src":"3.jpg"},
{"src":"4.jpg"},
{"src":"5.jpg"},
{"src":"6.jpg"},
{"src":"7.jpg"},
{"src":"8.jpg"},
]
};
window.onscroll=function(){
if (checkFlag()) {
var cparent=document.getElementById("container");
for (var i = 0; i < imgData.data.length; i++) {
var ccontent=document.createElement("div");
ccontent.className="box";
cparent.appendChild(ccontent);
var boximg=document.createElement("div");
boximg.className="box_img";
ccontent.appendChild(boximg);
var img=document.createElement("img");
img.src="images/"+imgData.data[i].src;
boximg.appendChild(img);
}
imgLocation("container","box");
}
}
}
function checkFlag(){
var cparent=document.getElementById("container");
var ccontent=getChildnode(cparent,"box");
var lastContentHeight=ccontent[ccontent.length-1].offsetTop;
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;
if (lastContentHeight<scrollTop+pageHeight) {
return true;
}
}
function imgLocation(parent,content){
var cparent=document.getElementById(parent);
var ccontent=getChildnode(cparent,content);
var imgWidth=ccontent[0].offsetWidth;
var cols=Math.floor(document.documentElement.clientWidth/imgWidth);
cparent.style.cssText="width:"+imgWidth*cols+"px;margin:0 auto";
//把第二排的左起第一張圖片放到第一排高度最小的那張下面
var imgHeightArr=[];
for (var i = 0; i < ccontent.length; i++) {
if (i<cols) {
imgHeightArr[i]=ccontent[i].offsetHeight;
}else{
var minHeight=Math.min.apply(null,imgHeightArr);
var minHeightIndex=getMinHeightLoc(imgHeightArr,minHeight);
console.log("minHeightIndex"+minHeightIndex);
ccontent[i].style.position="absolute";
ccontent[i].style.top=minHeight+"px";
ccontent[i].style.left=ccontent[minHeightIndex].offsetLeft+"px";
imgHeightArr[minHeightIndex]=imgHeightArr[minHeightIndex]+ccontent[i].offsetHeight;
console.log(imgHeightArr[i]);
console.log("高度最低:"+minHeight);
}
}
}
function getChildnode(parent,content){
var contentArr=[];
var allcontent=parent.getElementsByTagName("*");
for (var i = 0; i < allcontent.length; i++) {
if(allcontent[i].className==content){
contentArr.push(allcontent[i]);
}
};
return contentArr;
}
function getMinHeightLoc(imgHeightArr,minHeight){
for(var i in imgHeightArr){
if (imgHeightArr[i]==minHeight) {
return i;
}
}
}
希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- 原生js實(shí)現(xiàn)瀑布流布局
- 深入學(xué)習(xí)js瀑布流布局
- 純js實(shí)現(xiàn)瀑布流布局及ajax動(dòng)態(tài)新增數(shù)據(jù)
- javascript瀑布流布局實(shí)現(xiàn)方法詳解
- 基于JavaScript實(shí)現(xiàn)瀑布流布局(二)
- 原生JavaScript實(shí)現(xiàn)瀑布流布局
- 原生JS實(shí)現(xiàn)美圖瀑布流布局賞析
- 原生JS實(shí)現(xiàn)響應(yīng)式瀑布流布局
- 解析瀑布流布局:JS+絕對(duì)定位的實(shí)現(xiàn)
- JavaScript瀑布流布局實(shí)現(xiàn)代碼
相關(guān)文章
簡(jiǎn)單的仿Flash文字動(dòng)畫（兼容Mozilla）
簡(jiǎn)單的仿Flash文字動(dòng)畫（兼容Mozilla）...2007-01-01
微信小程序picker組件關(guān)于objectArray數(shù)據(jù)類型的綁定方法
這篇文章主要介紹了微信小程序picker組件關(guān)于objectArray數(shù)據(jù)類型的綁定方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)時(shí)間選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
使用weixin-java-tools完成微信授權(quán)登錄、微信支付的示例
這篇文章主要介紹了使用weixin-java-tools完成微信授權(quán)登錄、微信支付的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
JavaScript交換變量的常用方法小結(jié)【4種方法】
這篇文章主要介紹了JavaScript交換變量的常用方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript交換變量的4種實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
javascript 動(dòng)態(tài)table添加colspan\rowspan 參數(shù)的方法
動(dòng)態(tài)的給某個(gè)表對(duì)象添加列屬性和行屬性，采用obj.setAttribute("rowspan",n)(即rowspan=n)不能生效。2009-07-07
javascript中的with語句學(xué)習(xí)筆記及用法
在本篇文章里小編給大家分享的是關(guān)于javascript中的with語句學(xué)習(xí)筆記及用法，有需要的朋友們可以學(xué)習(xí)下。2020-02-02
ES6新特性八：async函數(shù)用法實(shí)例詳解
這篇文章主要介紹了ES6新特性八：async函數(shù)用法,結(jié)合實(shí)例形式分析了async函數(shù)的功能、原理、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-04-04
js實(shí)現(xiàn)從左向右滑動(dòng)式輪播圖效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)從左向右滑動(dòng)式輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
在 JavaScript 中,參數(shù)傳遞的方式可以分為基本類型的傳值和復(fù)雜類型的引用傳遞,根據(jù)使用場(chǎng)景和需求,不同的參數(shù)傳遞方式可能會(huì)有所差異,本文介紹JavaScript 中傳遞參數(shù)的方式,感興趣的朋友一起看看吧2025-01-01