This article uses the pure JS code to write a waterfall streaming page effect, the initial realization of a basic waterfall flow layout, as well as scrolling to the bottom of the simulation AJAX data load new image features.
Disadvantages:
1. The program is not responsive, can not adjust the width of the page in real time;
2. In the program when the new AJAX simulation data picture, is the entire page of all the pictures are relocated once.
3. The program is to wait for all pictures after loading completed and then read the size of the picture, in practice certainly cannot do so.
4. The actual project, should be the background program to give picture size values, in the JS code directly using the picture's width attribute.
This procedure train of thought:
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 ">
</div>
</div>
... </div>
</body>
First, the initialization of the layout
1. Set #container as position:relative;
2. Set. box for Float:left;
3. After loading the page to locate all the pictures;
3.1 Picture width is fixed, calculates the current page each row can hold the number num, and obtains the #container width, then sets the page center;
3.2 Loops through all the pictures, the former num pictures default float layout as the first row, and into the array boxheightarr = [];
3.3 After the first line layout is complete, arrange the next picture and update boxheightarr[]:
3.3.1 puts the next picture below the top of the first line (Position:absolute), which is the smallest column in boxheightarr[], and records the index value of the following numbers: Minindex;
3.3.2 Update boxheightarr[] The smallest value (boxheightarr[minindex]+ the height of the current picture);
3.4 Repeat cycle 3.3 steps until all pictures are in the finished arrangement
Second, real-time monitoring scrolling height, whether to load new data
1. The height of the last picture from the top when the initialization is complete: lastcontentheight
2. Use Window.onscroll = function () {...}
Real-time monitoring scrolling height of the current page is: scrolltop
Real-time Monitoring the current page window height is: pageheight
3. When the page is monitored to: lastcontentheight < scrolltop + PageHeight, use Ajax to get the JSON data for the new image.
Third, the bottom of the page new content
1. In a loop, first create a new picture container, add the bottom, and then write the corresponding picture data in the JSON data such as the path to the container to complete the add picture.
2. After adding all the new pictures, complete the initialization of step one for all the pictures and layouts of the whole page.
Project folder:
Index.html: Pre-placed partial picture data
<! DOCTYPE html>
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;
App.js:
Window.onload = function () {imglocation ("container", "box"); Ajax analog Data 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 ()) {//To determine whether to the bottom to load the new data var cparent = document.getElementById ("contain
Er ");
Load AJAX data into page for (var i=0 i
Effect Chart:
The above is the entire content of this article, I hope to learn JavaScript program to help you.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
