JavaScript實現瀑布流效果

2019-11-11 05:47:38

字體：大中小

來源：轉載

供稿：網友

1、HTML文件

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>js瀑布流</title><link rel="stylesheet" type="text/CSS" href="mystyle.css"><script src="myjs.js"></script></head><body>	<div id="container">		<div class="box">			<div class="box_img">				<img src="image/a (10).jpg">			</div>		</div>		<div class="box">			<div class="box_img">				<img src="image/a (11).jpg">			</div>		</div>		<div class="box">			<div class="box_img">				<img src="image/a (12).jpg">			</div>		</div>		<div class="box">			<div class="box_img">				<img src="image/a (13).jpg">			</div>		</div>		<div class="box">			<div class="box_img">				<img src="image/a (14).jpg">			</div>		</div>		<div class="box">			<div class="box_img">				<img src="image/a (15).jpg">			</div>		</div>		<div class="box">			<div class="box_img">				<img src="image/a (16).jpg">			</div>		</div>		<div class="box">			<div class="box_img">				<img src="image/a (17).jpg">			</div>		</div>		<div class="box">			<div class="box_img">				<img src="image/a (18).jpg">			</div>		</div>		<div class="box">			<div class="box_img">				<img src="image/a (16).jpg">			</div>		</div>		<div class="box">			<div class="box_img">				<img src="image/a (17).jpg">			</div>		</div>        <div class="box">        			<div class="box_img">        				<img src="image/a (16).jpg">        			</div>        		</div>        		<div class="box">        			<div class="box_img">        				<img src="image/a (17).jpg">        			</div>        		</div>        <div class="box">        			<div class="box_img">        				<img src="image/a (16).jpg">        			</div>        		</div>        		<div class="box">        			<div class="box_img">        				<img src="image/a (17).jpg">        			</div>        		</div>        <div class="box">        			<div class="box_img">        				<img src="image/a (16).jpg">        			</div>        		</div>        		<div class="box">        			<div class="box_img">        				<img src="image/a (17).jpg">        			</div>        		</div>        <div class="box">        			<div class="box_img">        				<img src="image/a (16).jpg">        			</div>        		</div>        <div class="box">       			<div class="box_img">       				<img src="image/a (16).jpg">       			</div>       		</div>       		<div class="box">      	<img src="image/a (17).jpg">                    <div class="box_img">       			</div>       		</div>	</div></body></html>2、js文件
window.onload=function(){imglocation("container","box");    var imgData={"data":[{"src":"a (10).jpg"},{"src":"a (11).jpg"},{"src":"a (12).jpg"},{"src":"a (13).jpg"},{"src":"a (4).jpg"},{"src":"a (15).jpg"},{"src":"a (6).jpg"}]}    window.onscroll=function(){                   if( checkFlag()){                          var cparent=document.getElementById("container");                       for(var i=0;i<imgData.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="image/"+imgData.data[i].src;                           boximg.appendChild(img);                       }                       imglocation("container","box");                   }    }}function checkFlag(){    var cparent=document.getElementById("container");    var ccontent=getChildelement(cparent,"box");    var lastcontntheight=ccontent[ccontent.length-1].offsetTop;   var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;    var pageheight=document.documentElement.clientHeight||document.body.clientHeight;    if(lastcontntheight<scrolltop+pageheight){        return true;    }}function imglocation(parent,content){//	var cparent=document.getElementById(parent);	var ccontent=getChildElement(cparent,content);	var imgWidth=ccontent[0].offsetWidth;	var num=Math.floor(document.documentElement.clientWidth/imgWidth);	cparent.style.cssText="width:"+imgWidth*num+"px;margin 0 auto";    var BoxHeighrArr=[];    for(var i=0;i<ccontent.length;i++){        if(i<num){            BoxHeighrArr[i]=ccontent[i].offsetHeight;        }else{            var minheight=Math.min.apply(null,BoxHeighrArr);          var minIndex=getminheightLocation(BoxHeighrArr,minheight);            ccontent[i].style.position="absolute";            ccontent[i].style.top=minheight="px";            ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";            BoxHeighrArr[minIndex]=BoxHeighrArr[minIndex]+ccontent[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(var i=0;i<allcontent.length;i++){    if(allcontent[i].className==content){        contentarr.push(allcontent[i]);    }}return contentarr;}3、css文件
*{	margion:0px;	padding:0px;}#container{	position:relative;}.box{	padding:5px;	float:left;}.box_img{	padding:5px;	border:1px solid #cccccc;	box-shadow: 0 0 5px #cccccc;	border-radius: 5px;}.box_img img{	width:100px;	height:auto;}

上一篇：javascript的知識點

下一篇：JavaScript原型