Example analysis of JS implementation of waterfall flow layout-JS Tutorial-php.cn

Example analysis of JS implementation of waterfall flow layout

黄舟

Release： 2017-10-23 09:49:54

Original

1443 people have browsed it

The example in this article shares the specific code for JS to implement waterfall flow layout display for your reference. The specific content is as follows

html part

<!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>
  <p id="main">
    <p class="box">
      <p class="pic">
        <img src="wallpoll/0.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/0.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/1.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/2.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/3.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/4.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/5.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/6.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/7.jpg" alt="">
      </p>
    </p>

    <p class="box">
      <p class="pic">
        <img src="wallpoll/8.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/9.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/10.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/11.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/12.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/13.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/14.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/15.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/16.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/17.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/18.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/19.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/20.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/21.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/22.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/23.jpg" alt="">
      </p>
    </p>
    <p class="box">
      <p class="pic">
        <img src="wallpoll/24.jpg" alt="">
      </p>
    </p>
  </p>
</body>
</html>

Copy after login

css part

*{
  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;
}

Copy after login

JS part

window.onload=function(){
  waterfall(&#39;main&#39;,&#39;box&#39;);
  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("p");
        box.className="box";
        oparent.appendChild(box);
        var pic=document.createElement("p");
        pic.className="pic";
        box.appendChild(pic);
        var img=document.createElement("img");
        img.src="wallpoll/"+dataInt.data[i].src;
        pic.appendChild(img);
      }
    }
    waterfall(&#39;main&#39;,&#39;box&#39;);
  }
}
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;
}

Copy after login

Course address.

The above is the detailed content of Example analysis of JS implementation of waterfall flow layout. For more information, please follow other related articles on the PHP Chinese website!