Home > Developer > JavaScript
Js-only implements waterfall stream layout and ajax dynamic addition of data, jsajax
This article uses pure js Code to write a waterfall web page effect, initially implementing a basic waterfall stream layout, and rolling to the bottom to simulate ajax data loading new image functions.
Disadvantages:
1. The program is not responsive and the page width cannot be adjusted in real time;
2. When an ajax simulated data image is added to the program, all the images on the entire page are located again.
3. The program will read the size of the image after loading all the images. This is definitely not the case in reality.
4. In actual projects, the background program should give the image size value and directly use the image width attribute in js Code.
The idea of this program:
Html structure:
<body> <div id="container"> <div class="box"> <div class="box_img"> </div> </div> <div class="box"> <div class="box_img"> </div> </div> ... </div></body>
I. initialize Layout
1. Set # container to position: relative;
2. Set. box to float: left;
3. Locate all images after the webpage is loaded;
3.1 The image width is fixed. The number of images per row on the current page is calculated as num, and the width of # container is obtained. Then, the page is centered;
3.2 traverse all images cyclically. The default float layout of the first num image is used as the first line, and the array BoxHeightArr = [] is saved.
3.3 After the layout of the first line is complete, arrange the next image and update BoxHeightArr []:
3.3.1 place the next image below the shorter image in the first line (locate it with position: absolute), that is, the column with the smallest height in BoxHeightArr [], and record the index values of the following numbers: minIndex;
3.3.2 update the smallest value in BoxHeightArr [] (BoxHeightArr [minIndex] + height of the current image );
3.4 Repeat steps 3.3 until all images are arranged
Ii. Real-time Monitoring of rolling height, whether to load new data
1. After initialization, the height of the last image from the top is obtained: lastContentHeight.
2. Use window. onscroll = function (){...}
The scroll height of the current page is scrollTop.
Real-time Monitoring of the current page window height: pageHeight
3. When the page detects: lastContentHeight <scrollTop + pageHeight, use ajax to obtain the json data of the newly added image.
3. Add content at the bottom of the page
1. in a loop, create a new image container and add it to the bottom. Then, write the corresponding image data, such as the path, in the json data to the container to add the image.
2. After adding all newly added images, perform Step 1 initialization for all images and la s on the page.
Project Folder:
Index.html: Pre-embedded part of image 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 simulate 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 () {// determine whether to load new data to the bottom var cparent = document. getElementById ("container"); // load ajax data into the page for (var I = 0; I:
The above is all the content of this article, and I hope it will help you learn javascript programming.
Articles you may be interested in:
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
