Webpage waterfall stream layout jQuery implements code and layout jquery

Webpage waterfall stream layout jQuery implements code and layout jquery

What is waterfall webpage layout?

Waterfall flow, also known as Waterfall flow layout. It is a popular website page layout, with the visual display of uneven multi-bar layout. As the page scroll down, this layout will continuously load data blocks and attach them to the current tail.

Let's take a look at the code and use pure CSS3 to see how it works!

HTML

<div id="all"><div class="box"><div class="pic"></div></div><div class="box"><div class="pic"></div></div><div class="box"><div class="pic"></div></div><div class="box"><div class="pic"></div></div><div class="box"><div class="pic"></div></div><div class="box"><div class="pic"></div></div><div class="box"><div class="pic"></div></div><div class="box"><div class="pic"></div></div><div class="box"><div class="pic"></div></div><div class="box"><div class="pic"></div></div><div class="box"><div class="pic"></div></div><div class="box"><div class="pic"></div></div></div>

Here we use a large box to hold all the content, a small box to hold block content, and a pic box to hold pictures. View css code

CSS

* {Margin: 0; padding: 0 ;}# all {/* key code */-webkit-column-width: 437px;-moz-column-width: 437px; -o-column-width: 437px;-ms-column-width: 437px;/*-webkit-column-count: 3;-moz-column-count: 3; -o-column-count: 3;-ms-column-count: 3; * // *-webkit-column-rule: 2px dashed # F00; -moz-column-rule: 2px dashed # F00;-o-column-rule: 2px dashed # F00;-ms-column-rule: 2px dashed # F00; * // *-webkit-column-gap: 5px;-moz-column-gap: 5px;-o-column-gap: 5px;-ms-column-gap: 5px; */}. box {padding: 15px 0 0 15px ;}. pic {padding: 10px; border: 1px solid # ccc; border-radius: 5px; box-shadow: 0 0 5px # ccc; width: 400px ;}. pic> img {width: 400px; height: auto ;}

The result is displayed.

It can be seen that CSS3 implements waterfall streams, but the style looks strange, and the gap between the left and right la S is not flexible enough. The column width changes with the size of the browser window. The user experience is poor. The picture is sorted in vertical order, which breaks the display order of the image. The loading of the image is still based on JavaScript. The only advantage is that computing is not required, and the browser automatically calculates. You only need to set the column width and the performance is high.

To achieve better results, we should use algorithms to implement them. The following shows how jquery code works with css to implement waterfall streams.

CSS

*{margin: 0;padding: 0;}#all{position: relative;}.box{padding: 15px 0 0 15px;float: left;}.pic{padding: 10px;border: 1px solid #ccc;border-radius: 5px;box-shadow: 0 0 5px #ccc ;}.pic>img{width: 400px;height: auto;}

Jquery

$(window).load(function(){waterfall();// var dataInt={"data":[{"src":"cars/1.jpg"},{"src":"cars/2.jpg"},{"src":"cars/3.jpg"},{"src":"cars/4.jpg"}]}// $(window).scroll(function(){// if(checkScrollSlide){// $.each(dataInt.data,function(key,value){// var oBox=$("<div>").addClass("box").appendTo($("#all"));// var oPic=$("<div>").addClass("pic").appendTo($(oBox));// var oImg=$("div");var w=$boxs.eq(0).outerWidth();var cols=Math.floor($(window).width()/w);$('#all').width(w*cols).css("margin","0 auto");var hArr=[];$boxs.each(function(index,value){var h=$boxs.eq(index).outerHeight();if(index<cols){hArr[index]=h;}else{var minH=Math.min.apply(null,hArr);var minHIndex=$.inArray(minH,hArr);// console.log(minH);$(value).css({'position':'absolute','top':minH+'px','left':minHIndex*w+'px'})hArr[minHIndex]+=$boxs.eq(index).outerHeight();}});}//function checkScrollSlide(){// var $lastBox=$("#all>div").last();// var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);// var scrollTop=$(window).scrollTop();// var documentH=$(window).height();// return(lastBoxDis<scrollTop+documentH)?true:false;//}

The effect is as follows:

Obviously, the effect is much better. The image sorting is based on the position calculated by the image, and the position is calculated and more standard.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.