Ajax implementation Waterfall Flow layout _ajax related

Waterfall flow is currently a more popular site interface layout, uneven layout of multiple columns and to reach the bottom of the automatic loading way, so that the site in the visual and user experience can be greatly improved. The earliest use of this layout is a foreign image of the site Pinterest, and then some of the domestic image site began to use waterfall flow layout, including and Pinterest similar petals nets, pictures of community lofter, Beautiful said, Mushroom street and so on.

Waterfall flow in the layout for most people should be very simple, compared to only a few columns. The main thing about waterfall streams is the asynchronous loading of data.

First, let's say the waterfall flow method used in this example. Waterfall flow layout To achieve a lot of concrete can be their own Baidu, here no longer repeat. The waterfall flow implementation method in this paper is four-column layout (li*4), each picture is a box (div>img+p), after reading data from the background to assign value to the elements in the box, determine the height of the smallest column (LI), and then add the box to the corresponding column (LI), then the next decision, and so on Until all the data on this page is loaded.

Code section:

Html+css

<! 
    DOCTYPE html>  

JavaScript part: Ajax part and implementation part

/** 
 * * 
 @param {Object} methods Get and Post method 
 * @param {object} URL file path 
 * @param {Object} data page number 
 * @para m {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 =) { 
        Success & & Success (Xhr.responsetext); 
        Console.log (Xhr.responsetext); 
      } else { 
        alert (' Error, ERR: ' + Xhr.status ');}}} 

The

 ajax part is modified on the basis of the previous Ajax work and simple encapsulation of the function, which is not difficult to understand after that. This is one more data parameter than that, and data is the page number used to read it.

Window.onload = function () {//Get interface node var ul = document.getElementById (' ul1 '); 
  var li = document.getelementsbytagname (' li '); 
  var lilen = li.length; 
  var page = 1; 
  var bool = false; The call interface gets the data loadpage ()//The first load/** * Load the page function LoadPage () {Ajax (' get ', ' getpics.php ', ' cpage 
      = ' +page, function (data) {//Convert the data obtained in the database into the array form, based on the data form in the database, where I get the JSON form var data = json.parse (data); Writes 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 '); 
        Mg.style.height = Data[i].height * (230/data[i].width) + "px"; 
        Div.appendchild (IMG); 
        var p = document.createelement (' P '); p.innerhtml = data[i].title;//P Gets the picture title Div.appendchild (p); 
      Add to the shortest Li Li[index].appendchild (div); 
  BOOL = true;//Load Complete set switch for later to determine whether to load next page}); 
    } Window.onscroll = function () {var index = Getshort (LI); 
    var Minli = Li[index]; var scrolltop = document.documentelement.scrolltop| | 
     
    Document.body.scrollTop; if (minli.offsetheight+minli.offsettop<scrolltop+document.documentelement.clientheight) {//switch is on, that is, the previous page loaded complete, 
        To begin loading if (BOOL) {bool = false; 
        page++; 
      LoadPage (); 
  /** * Gets the smallest index 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 dynamic to write the generated div to the page, which contains changes to the box style and data writing, data through the AJAX function from the server side.

It should be noted that the operation of this instance depends on the server, so it is necessary to build a simple server locally, quickly build can use Wampservice.

Here is the PHP code for our data source:

<?php 
header (' content-type:text/html; charset= "Utf-8"); 
/* API: 
  getpics.php 
 
    parameter 
    cpage: The number of pages to get 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 the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.