JS实现瀑布流布局

2024-05-06 16:40:29

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了JS实现瀑布流布局展示的具体代码，供大家参考，具体内容如下

html部分

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>瀑布流布局</title>  <script src="wallpoll.js"></script>  <link rel="stylesheet" href="wallpoll.css" rel="external nofollow" ></head><body>  <div id="main">    <div class="box">      <div class="pic">        <img src="wallpoll/0.jpg"      </div>    </div>    <div class="box">      <div class="pic">        <img src="wallpoll/0.jpg"      </div>    </div>    <div class="box">      <div class="pic">        <img src="wallpoll/1.jpg"      </div>    </div>    <div class="box">      <div class="pic">        <img src="wallpoll/2.jpg"      </div>    </div>    <div class="box">      <div class="pic">        <img src="wallpoll/3.jpg"      </div>    </div>    <div class="box">      <div class="pic">        <img src="wallpoll/4.jpg"      </div>    </div>    <div class="box">      <div class="pic">        <img src="wallpoll/5.jpg"      </div>    </div>    <div class="box">      <div class="pic">        <img src="wallpoll/6.jpg"      </div>    </div>    <div class="box">      <div class="pic">        <img src="wallpoll/7.jpg"      </div>    </div>    <div class="box">      <div class="pic">        <img src="wallpoll/8.jpg"      </div>    </div>    <div class="box">      <div class="pic">        <img src="wallpoll/9.jpg"      </div>    </div>    <div class="box">      <div class="pic">        <img src="wallpoll/10.jpg"      </div>    </div>    <div class="box">      <div class="pic">        <img src="wallpoll/11.jpg"      </div>    </div>    <div class="box">      <div class="pic">        <img src="wallpoll/12.jpg"      </div>    </div>    <div class="box">      <div class="pic">        <img src="wallpoll/13.jpg"      </div>    </div>    <div class="box">      <div class="pic">        <img src="wallpoll/14.jpg"      </div>    </div>    <div class="box">      <div class="pic">        <img src="wallpoll/15.jpg"      </div>    </div>    <div class="box">      <div class="pic">        <img src="wallpoll/16.jpg"      </div>    </div>    <div class="box">      <div class="pic">        <img src="wallpoll/17.jpg"      </div>    </div>    <div class="box">      <div class="pic">        <img src="wallpoll/18.jpg"      </div>    </div>    <div class="box">      <div class="pic">        <img src="wallpoll/19.jpg"      </div>    </div>    <div class="box">      <div class="pic">        <img src="wallpoll/20.jpg"      </div>    </div>    <div class="box">      <div class="pic">        <img src="wallpoll/21.jpg"      </div>    </div>    <div class="box">      <div class="pic">        <img src="wallpoll/22.jpg"      </div>    </div>    <div class="box">      <div class="pic">        <img src="wallpoll/23.jpg"      </div>    </div>    <div class="box">      <div class="pic">        <img src="wallpoll/24.jpg"      </div>    </div>  </div></body></html>

css部分

*{  padding:0px;  margin:0px;}.main{  position:relative;}.box{  padding:15px 0 0 10px;  float:left;}.pic{  padding:10px;  border: 1px solid #ccc;  border-radius: 5px;  box-shadow: 0 0 5px #ccc;  /*float:left;*/}img{  width:170px;  height:auto;}

JS部分

window.onload=function(){  waterfall('main','box');  var dataInt={"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"}]}  window.onscroll=function(){    if(checkScrollSlide){      for(var i=0;i<dataInt.data.length;i++){        var oparent=document.getElementById("main");        var box=document.createElement("div");        box.className="box";        oparent.appendChild(box);        var pic=document.createElement("div");        pic.className="pic";        box.appendChild(pic);        var img=document.createElement("img");        img.src="wallpoll/"+dataInt.data[i].src;        pic.appendChild(img);      }    }    waterfall('main','box');  }}function waterfall(parent,child){  var oparent=document.getElementById(parent);  var boxs=oparent.getElementsByClassName(child);  var boxw=boxs[0].offsetWidth;  var cols=Math.floor(document.documentElement.clientWidth/boxw);  oparent.style.cssText="width:"+cols*boxw+"px;margin:0 auto";  var harr=new Array();  for(var i=0;i<boxs.length;i++){    if(i<cols){      harr.push(boxs[i].offsetHeight);     }else{      var minH=Math.min.apply(null,harr);      var index=getMinhIndex(harr,minH);      boxs[i].style.position="absolute";      boxs[i].style.top=minH+"px";      boxs[i].style.left=boxs[index].offsetLeft+"px";      harr[index]+=boxs[i].offsetHeight;    }  }}function getMinhIndex(arr,val){  for(var i in arr){    if(arr[i]===val){      return i;    }  }}function checkScrollSlide(){  var oparent=document.getElementById("main");  var boxs=oparent.getElementsByClassName("box");  var lastBox=boxs[boxs.length-1];  var height=lastBox.offsetTop+Math.floor(lastBox.offsetHeight/2);  var scrollHeigth=document.documentElement.scrollTop || document.body.scrollTop;  // console.log(scrollHeigth);  var seeHeigth=document.documentElement.clientHeigth || document.body.clientHeigth;  return seeHeigth+scrollHeigth>height?true:false;}

课程地址。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持VeVb武林网。

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：js注册时输入合法性验证方法

下一篇：现代 JavaScript 参考