jquery implements simple waterfall flow layout

is the principle that will be mentioned at the beginning

There are two types of waterfall flow layouts, one is fixed columns and the other is non-fixed columns. This article mainly describes the implementation of the first type.

The characteristic of fixed columns is: no matter how the page is scaled, the total number of columns in each row is the same.

From a layout perspective, a waterfall flow with one row and four columns is four li tags. Through certain events (such as how many px the scroll bar scrolls), then read it, and then dynamically add the data to the page.

The principle of adding data is not to add based on the li index value, but to add dynamically based on the column with the shortest height among the columns. Otherwise, the page may be ugly (the left and right heights are not uniform).

The example involves the ajax method. Can be run in a server environment.

stop bullshitting. Apply the style directly.

<ul id="ul1">
 <li>
  <div>
   <img  src="/static/imghwm/default1.png"  data-src="images/1.jpg"  class="lazy"   alt="jquery implements simple waterfall flow layout" >
   <p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p>
  </div>
 </li>
 <li>
  <div>
   <img  src="/static/imghwm/default1.png"  data-src="images/2.jpg"  class="lazy"   alt="jquery implements simple waterfall flow layout" >
   <p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p>
  </div>
 </li>
 <li>
  <div>
   <img  src="/static/imghwm/default1.png"  data-src="images/3.jpg"  class="lazy"   alt="jquery implements simple waterfall flow layout" >
   <p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p>
  </div>
 </li>
 <li>
  <div>
   <img  src="/static/imghwm/default1.png"  data-src="images/4.jpg"  class="lazy"   alt="jquery implements simple waterfall flow layout" >
   <p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p>
  </div>
 </li>
</ul>

css

*{
 margin:0;
 padding: 0;
}
ul li{
 list-style: none;
}
#ul1{
 width: 1080px;
 margin: 100px auto 0;
}
li{
 width: 247px;
 float: left;
 margin-right: 10px;
}
li div{
 border:1px solid #000;padding:10px;
 margin-bottom:10px;
}
li div img{
 width: 225px;display: block;
}

The basic effect is as shown in the figure:

After the style is displayed correctly, delete the code in li.

Next, add it dynamically through ajax.

Where does the data come from?

The data interface of wookmark is used here.

http://www.wookmark.com/api/json/popular?page=1

Click on the url to get a json.

A lot of information. How to analyze?

Generally, you can read the documentation. But if you don’t have the document at hand, you can look at the link. What the hell is return.

function createUrl(num){
 return 'http://www.wookmark.com/api/json/popular?page='+num+'&callback=?';
}
$(function(){
 $.getJSON(createUrl(1),function(data){
  console.log(data);
 })
})

The console print result is:

It turns out to be an array composed of 50 picture information. Each array element is a json. In this simple demo, you only need to get the preview attribute and title attribute for the time being.

Layout implementation

One of the keys is to determine the shortest li. In fact, we need the index value of the shortest height li.

//找出高度最小li的索引值
function getShortestLi(){
 var shortest=0;
 for(var i=1;i<4;i++){
  if($(&#39;li&#39;).eq(i).height()<$(&#39;li&#39;).eq(shortest).height()){
   shortest=i;
  }
 }
 return shortest;
}

Then there is the getJSON method

$(function(){
 $.getJSON(createUrl(1),function(data){
  //console.log(data);
  for(var i=0;i<dataArr.length;i++){
   var $html=$(&#39;<div><img  src="/static/imghwm/default1.png"  data-src="&#39;+data[i].preview+&#39;"  class="lazy"   alt="jquery implements simple waterfall flow layout" ><p>&#39;+data[i].title+&#39;</p></div>&#39;);
   //console.log($(&#39;li&#39;).eq(getShortestLi()).height())
   $(&#39;li&#39;).eq(getShortestLi()).append($html);
  };
  console.log([$(&#39;li&#39;).eq(0).height(),$(&#39;li&#39;).eq(1).height(),$(&#39;li&#39;).eq(2).height(),$(&#39;li&#39;).eq(3).height()])
 })
})

Load it again and the layout will come out. Simple and beautiful.

At this point, everything looks fine. But there's a fatal problem lurking.

The for loop is causing trouble?

Look at the console.log information. For analysis, I put the heights of the four li's into an array:

The 50 pictures are divided into 4 columns. The average height must be three to four thousand pixels at least.

At the end of the loop, the end point judged by the program is only an outrageous 1,000 px, because the image loading process is slower than the for loop execution speed. Although the display in the demo is normal, this kind of code can cause work accidents when the network speed is not good.

Idea 1: You can determine whether the image is loaded.

You can use a timer to monitor it, and then use recursion to implement it. My plan is like this

var index=0;
function LoadPic(index){
 var $html=$(&#39;<div><img  src="/static/imghwm/default1.png"  data-src="&#39;+data[index].preview+&#39;"  class="lazy"   alt="jquery implements simple waterfall flow layout" ><p>&#39;+data[index].title+&#39;</p></div>&#39;)
 $(&#39;li&#39;).eq(getShortestLi()).append($html);
 var oImg=$html.find(&#39;img&#39;);
 var t=setInterval(function(){
  if(oImg.height()!=0){//如果加载完了。
   clearInterval(t);
   //console.log([$(&#39;li&#39;).eq(0).height(),$(&#39;li&#39;).eq(1).height(),$(&#39;li&#39;).eq(2).height(),$(&#39;li&#39;).eq(3).height()])
   if(index<50){
    return LoadPic(index+1);
   }else{
    return false;
   } 
  }else{
   console.log(&#39;wait&#39;)
  }
 },50)//每隔50ms监听一次
}
LoadPic(0);

However, from the perspective of user experience, wait until a picture is loaded before proceeding. One load is unfriendly. Data providers should directly process the height of the image on the server and return it in json data. When the Internet speed is very slow, you have to wait for a long time, and then all the pictures come out all of a sudden. Don’t you think it’s weird? Especially third-party interfaces. Once it fails to load, there is a big problem.

Fortunately, the third party provides the width and height information of the image.

So you can still have a for loop. In the returned data, there are width and height values. Using them, you can achieve fixed width (255px) and fixed height (original height multiplied by a ratio).

$(function(){
 $.getJSON(createUrl(1),function(data){
  console.log(data);
  for(var i=0;i<data.length;i++){
    //console.log(data[i].preview);
    var $html=$(&#39;<div><img  src="/static/imghwm/default1.png"  data-src="&#39;+data[i].preview+&#39;"  class="lazy"   alt="jquery implements simple waterfall flow layout" ><p>&#39;+data[i].title+&#39;</p></div>&#39;)
    $(&#39;li&#39;).eq(getShortestLi()).append($html);
     
    $html.find(&#39;img&#39;).css(&#39;height&#39;,(data[i].height*225/data[i].width)+&#39;px&#39;);
    $html.find(&#39;img&#39;).css(&#39;width&#39;,&#39;225px&#39;); 
   };
  //console.log([$(&#39;li&#39;).eq(0).height(),$(&#39;li&#39;).eq(1).height(),$(&#39;li&#39;).eq(2).height(),$(&#39;li&#39;).eq(3).height()])
 })
})

In fact, I personally think this is the simplest solution with the best user experience.

With the waterfall, we also need to flow

The logic of the flow

Pull down (scroll), the first li that enters the visual area at the bottom is loaded first.

In other words, when the sum of the height of the shortest li and the li to the top of the page is less than the sum of the height of the scroll bar and the height of the visual area, the li loading is triggered.

The height of li is easy to find. But how to find the shortest distance from li to the top of the page?

The native method can be implemented like this:

function getTop(obj){
 var iTop=0;
 while(obj){
  iTop+=obj.offsetTop;
  obj=obj.offsetParent;
 }//累加元素本身和自身所有父级高度偏移值
 return iTop;
}

But since this case uses jquery, it naturally has its own method.

obj.offset().top

Scroll event

The native implementation method is: window.onscroll=function(){...}

The implementation method of jquery is: $(window).scroll(function(){...})

Now verify whether there is any problem with the written code

(window).scroll(function(){
 var $li=$('li').eq(getShortestLi());
 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
 //console.log([$li.offset().top+$li.height(),document.documentElement.clientHeight+scrollTop])
 //如果li高度与li到页面顶部的高度之和<可视区高度+滚动距离
 if($li.offset().top+$li.height()<document.documentElement.clientHeight+scrollTop){
   alert(1);
 }
})

Run the code, When it is found that the first li to the bottom appears in the visible area, 1 will pop up to prove that it is available.

Because scrolling events are involved, getJSON related functions should be encapsulated as getList() for easy calling. So it needs to be readjusted.

The code at this time is like this:

//找出高度最小li的索引值
function getShortestLi(){
 var shortest=0;
 for(var i=1;i<4;i++){
  if($(&#39;li&#39;).eq(i).height()<$(&#39;li&#39;).eq(shortest).height()){
   shortest=i;
  }
 }
 return shortest;
}
function createUrl(num){
 return 'http://www.wookmark.com/api/json/popular?page='+num+'&callback=?';
}
function getList(n){
 $.getJSON(createUrl(n),function(data){
  //console.log(data);
  for(var i=0;i
'+data[i].title+'