Pure js implements waterfall flow layout and ajax dynamically adds data

This article uses pure js code to hand-write a waterfall flow web page effect, initially realizing a basic waterfall flow layout, and simulating the ajax data loading new image function after scrolling to the bottom.

Disadvantages:

1. The program is not responsive and cannot adjust the page width in real time;

2. After adding ajax simulation data images to the program, all images on the entire page will be repositioned.

3. The program waits for all images to be loaded before reading the image size. This cannot be done in practice.

4. In actual projects, the image size value should be given by the background program, and the width attribute of the image should be used directly in the js code.

The idea of this program:

html structure:

<body>
  <div id="container">
    <div class="box">
      <div class="box_img">
        <img src="img/1.jpg" />
      </div>
    </div>
    <div class="box">
      <div class="box_img">
        <img src="img/2.jpg" />
      </div>
    </div>
    ...
  </div>
</body>

Copy after login

1. Initialization layout

1. Set #container to position:relative;

2. Set .box to float:left;

3. Position all images after the web page is loaded;

　3.1 The image width is fixed. Calculate the number of images num that can be accommodated in each row of the current page, and obtain the width of #container, and then set the page to be centered;

　3.2 Loop through all pictures. The first num pictures default to float layout as the first row and stored in the array BoxHeightArr = [];

3.3 After the first row layout is completed, arrange the next image and update BoxHeightArr[]:

　3.3.1 Place the next image below the shortest image in the first row (position using position:absolute), that is, the column with the smallest height in BoxHeightArr[], record the index value of the following number: minIndex;

　3.3.2 Update the smallest value in BoxHeightArr[] (BoxHeightArr[minIndex]+height of the current picture);

　3.4 Repeat step 3.3 until all pictures are arranged

2. Monitor the scroll height in real time and determine whether to load new data

1. After initialization is completed, get the height of the last image from the top: lastContentHeight

2. Use window.onscroll = function(){...}

Monitor the scroll height of the current page in real time: scrollTop

Real-time monitoring of the current page window height is: pageHeight

3. When the page detects: lastContentHeight < scrollTop + pageHeight, use ajax to obtain the json data of the newly added image.

3. New content at the bottom of the page

1. Use a loop to first create a new image container, add it to the bottom, and then write the corresponding image data such as path and other information in the json data into the container to complete adding the image.

2. After all new images have been added, re-execute the initialization operation in step 1 for all images and layouts on the entire page.

Project folder:

index.html: Pre-place some image data

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="css/style.css"/>
  <script src="js/app.js"></script>
  <title>JavaScript瀑布流</title>
 </head>
 <body>
  <div id="container">
   <div class="box">
    <div class="box_img">
     <img src="img/1.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/2.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/3.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/4.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/5.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/6.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/7.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/8.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/9.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/10.jpg"/>
    </div>
   </div>
   
   <div class="box">
    <div class="box_img">
     <img src="img/1.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/2.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/3.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/4.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/5.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/6.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/7.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/8.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/9.jpg"/>
    </div>
   </div>
  
   <div class="box">
    <div class="box_img">
     <img src="img/10.jpg"/>
    </div>
   </div>
   
   <div class="box">
    <div class="box_img">
     <img src="img/1.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/2.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/3.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/4.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/5.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/6.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/7.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/8.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/9.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/9.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/10.jpg"/>
    </div>
   </div>
  </div>
 </body>
</html>

Copy after login

style.css:

*{
 margin: 0;
 padding: 0;
}
#container{
 position: relative;
}
.box{
 padding: 5px;
 float: left;
}
.box_img{
 padding: 5px;
 border: 1px solid #ccc;
 box-shadow: 0 0 5px #ccc;
 border-radius: 5px;
}
.box_img img{
 width: 150px;
 height: auto;
}

Copy after login

app.js:

window.onload = function(){
 imgLocation("container", "box");
 //ajax模拟数据
 var imgData = {"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"8.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"8.jpg"}]}
 
 window.onscroll = function(){
  if(checkFlag()){ //判断是否到底部要加载新的数据
   var cparent = document.getElementById("container");
   //把ajax数据加载进页面
   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 = "img/"+imgData.data[i].src;
    boximg.appendChild(img);
   }
   //把所有图片数据重新定位一次
   imgLocation("container", "box");
  }
 }
};

function checkFlag(){
 var cparent = document.getElementById("container");
 var ccontent = getChildElement(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;
 console.log(lastContentHeight+":"+scrollTop+":"+pageHeight);
 
 if(lastContentHeight < scrollTop + pageHeight){
  return true;
 }
}

function imgLocation(parent, content){
 //将parent下所有的content全部取出
 var cparent = document.getElementById(parent);
 var ccontent = getChildElement(cparent, content);
 //根据当前浏览器窗口的宽度，确定每行图片数并固定，居中
 var imgWidth = ccontent[0].offsetWidth; //offsetWidth = width + padding + border
 var num = Math.floor(document.documentElement.clientWidth / imgWidth);
 cparent.style.cssText = "width:"+imgWidth*num+"px;margin:0 auto";
 //alert("pause");
 //设置一个数组，用来承载第一行的图片信息
 var BoxHeightArr = [];
 for(var i=0; i<ccontent.length; i++){
  if(i<num){
   //第一行的图片的高度记录下来
   BoxHeightArr[i] = ccontent[i].offsetHeight;
   //当ajax数据加载后，程序是将所有图片重新定位，所以第一行的图片要清除position:absolute
   ccontent[i].style.position = "static";
  }else{
   var minHeight = Math.min.apply(null, BoxHeightArr);
   var minIndex = getminheightLocation(BoxHeightArr, minHeight);
   
   //把图放在第一行图索引值最小的下面
   ccontent[i].style.position = "absolute";
   ccontent[i].style.top = minHeight+"px";
   ccontent[i].style.left = ccontent[minIndex].offsetLeft+"px";
   
   //图片放好位置后更新“第一行图片信息的最小高度”，
   //然后利用for循环重复这个动作到结束
   BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight;
  }
 }
;}

//获取第一行图片高度最小的索引值
function getminheightLocation(BoxHeightArr, minHeight){
 for(var i in BoxHeightArr){
  if(BoxHeightArr[i] == minHeight){
   return i;
  }
 }
}

//获取所有box
function getChildElement(parent, content){
 contentArr = parent.getElementsByClassName(content);
 return contentArr;
}

Copy after login

Rendering: