AJAX implements waterfall stream layout and ajax waterfall Layout

AJAX implements waterfall stream layout and ajax waterfall Layout

Waterfall stream is a popular website interface layout method, with uneven multi-column layout and automatic loading at the bottom, this greatly improves the visual and user experience of websites. Pinterest, a foreign image website, was first used in this layout, and some domestic image websites began to use waterfall stream layout, including Pinterest and similar petal network, picture community lofter, meitao, mogujie.com and so on.

Waterfall stream layout should be very simple for most people, with only a few columns. The most important thing about Waterfall streams is the asynchronous loading of data.

First, let's talk about the waterfall stream method used in this instance. There are many ways to implement waterfall stream layout. For details, refer to Baidu. In this article, the waterfall stream is implemented in four columns (li * 4), each image is a box (div> img + p), and the elements in the box are assigned after reading data from the background, determine the column (li) with the smallest height at this time, add the box to the corresponding column (li), then perform the next judgment, and so on until all data on the page is loaded.

Code Section:

Html + css

<! DOCTYPE html> 
Javascript: ajax and implementation

/***** @ Param {Object} method get and post method * @ param {Object} url file path * @ param {Object} data page number * @ param {Object} success successful function */function ajax (method, url, data, success) {var xhr = null; try {xhr = new XMLHttpRequest ();} catch (e) {xhr = new ActiveXObject ('Microsoft. XMLHTTP ');} if (method = 'get' & data) {url + = '? '+ Data;} xhr. open (method, url, true); if (method = 'get') {xhr. send ();} else {xhr. setRequestHeader ('content-type', 'application/x-www-form-urlencoded'); xhr. send (data);} xhr. onreadystatechange = function () {if (xhr. readyState = 4) {if (xhr. status = 200) {success & success (xhr. responseText); console. log (xhr. responseText);} else {alert ('error, Err:' + xhr. status );}}}}
The ajax part is modified based on the previously written Ajax working principle and simple function encapsulation. It is basically no difficulty to understand it. This is an additional data parameter. data is the page number used to read data.

Window. onload = function () {// obtain the interface node var ul = document. getElementById ('ul1'); var li = document. getElementsByTagName ('lil'); var liLen = li. length; var page = 1; var bool = false; // call the interface to obtain the data loadPage (); // load the page for the first time/*** function for loading the page */function loadPage () {ajax ('get', 'getpics. php ', 'cpage =' + page, function (data) {// convert the data obtained from the database into an array. here we need to write it according to the data format in the database, here I get the json form var data = JSON. parse (data); // write data to the div for (var I = 0; I <data. length; I ++) {var index = getShort (li); // find the shortest li // create a new node: div> img + p var div = document. createElement ('div '); var img = document. createElement ('img '); img. src = data [I]. preview; // img obtains the image address img. alt = "Wait... "// calculate the img height based on the aspect ratio. In order to prevent the failure of loading, the height is too low, and the result is the shortest Li. style. height = data [I]. height * (230/data [I]. width) + "px"; div. appendChild (img); var p = document. createElement ('P'); p. innerHTML = data [I]. title; // p obtain the image title div. appendChild (p); // Add to the shortest li [index]. appendChild (div);} bool = true; // The loading completion setting switch is used to determine whether to load the next page.});} window. onscroll = function () {var index = getShort (li); var minLi = li [index]; var scrollTop = document.doc umentElement. scrollTop | document. body. scrollTop; if (minLi. offsetHeight + minLi. offsetTop <scrollTop+document.doc umentElement. clientHeight) {// if (bool) {bool = false; page ++; loadPage ();}}}} /*** obtain the index with the smallest height in the array * @ param {Object} li array */function getShort (li) {var index = 0; var liHeight = li [index]. offsetHeight; for (var I = 0; I <li. length; I ++) {if (li [I]. offsetHeight <liHeight) {index = I; liHeight = li [I]. offsetHeight ;}} return index ;}
This part of the function is mainly to dynamically write the generated div into the page, which includes modification to the box style and Data Writing, data is obtained from the server through the ajax function.

Note that the running of this instance depends on the server. Therefore, you need to build a simple server locally and quickly set up WampService.

The following is the php code of our Data source:

<? Php header ('content-type: text/html; charset = "UTF-8" ');/* API: getPics. php parameter cpage: the number of pages to obtain data */$ cpage = isset ($ _ GET ['cpage'])? $ _ GET ['cpage']: 1; $ url = 'HTTP: // www.wookmark.com/api/json/popular? Page = '. $ cpage; $ content = file_get_contents ($ url); $ content = iconv ('gbk', 'utf-8', $ content); echo $ content;?>
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.