jQuery implements waterfall flow layout

HTML

复制代码代码如下:

CSS

复制代码代码如下:

 * {

     margin: 0;

     padding: 0;

 }

 #main {

     position: relative;

 }

 .box {

     padding:15px 0 0 15px;

     float:left;

 }

 .pic {

     padding: 10px;

     border: 1px solid #ccc;

     border-radius: 5px;

     box-shadow: 0px 0px 5px #ccc;

     img {

         width:165px;

         height:auto;

     }

 }

JavaScript

复制代码代码如下:

$(window).on("load",function () {
waterfall();
var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src": "6.jpg"}]}
//Simulate json data;
$(window).on("scroll",function () {
if(checkScrollSlide){
$.each(dataInt.data,function (key,value) {
var oBox=$("

").addClass("box").appendTo($("#main"));
//jQuery supports concatenation and implicit iteration;
var oPic=$("

").addClass('pic').appendTo($(oBox));
$("").attr("src","images/" $(value).attr("src")).appendTo(oPic);
             });
waterfall();
         }
})
});
//Flow layout main function;
function waterfall () {
var $boxs=$("#main>div");
//Get the direct child element div.box under the #main element;
//Get the width of each column;
var w=$boxs.eq(0).outerWidth();
//outerWidth() gets the width including padding and border;
//var w=$boxs.eq(0).width();
//width() can only get the width defined for the element;
var cols=Math.floor($(window).width()/w);
//How many columns to get;
$("#main").width(w*cols).css("margin","0 auto");
//Set the width and centering style of the #main element;
var hArr=[];
//Set of heights of each column;
$boxs.each(function (index,value) {
//Traverse each box element;
//In order to find the lowest point of all previous elements, then set this element to below the lowest point;
var h=$boxs.eq(index).outerHeight();
//Height of each box element,
             if (index hArr[index]=h;
//Determine the height of the first element in each column;
           } else{
var minH=Math.min.apply(null,hArr);
//Get the minimum height in the column height array;
var minHIndex=$.inArray(minH,hArr);
//$.inArray() method gets the index value of element (minH) in array (hArr);
//console.log(value);
//The value at this time is the DOM object of all box elements after the first line!;
$(value).css({
//$(value): Convert the DOM object into a jQuery object before you can continue to use jQuery methods;
"position":"absolute",
"top":minH "px",
"left":minHIndex*w "px"
             });
hArr[minHIndex] =$boxs.eq(index).outerHeight();
//Height of the lowest tallest element The height of the element just added to the lowest height = new column height;
          };
});
// console.log(hArr);
};
function checkScrollSlide () {
var $lastBox=$("#main>div").last();
var lastBoxDis=$lastBox.offset().top Math.floor($lastBox.outerHeight()/2);
var scrollTop=$(window).scrollTop();
var documentH=$(window).height();
Return (lastBoxDis }

Please refer to the comments carefully for detailed explanation, I won’t write it out separately.

Related labels：

jquery Waterfalls flow

source：php.cn

Previous article：JS compatible with mainstream browsers to copy content to the clipboard_javascript skills Next article：js method to implement iframe cross-page function calling_javascript skills

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

jQuery implements waterfall flow layout_jquery