The creation of jquery waterfall stream and jquery waterfall stream

The creation of jquery waterfall stream and jquery waterfall stream

First, let's take a look at the cool pages:

Today, I said:

I. Preparations

The newly created CSSS, JS, and IMG file are stored in the corresponding file, and external files are introduced in the demo.html file (attention should be paid to the introduction of jquery file), which is not described here.

II. Image Display

<div id="main">    <div class="pic">            </div>        <div class="pic">            </div>        <div class="pic">            </div>        <div class="pic">            </div>        <div class="pic">            </div>        <div class="pic">            </div>        <div class="pic">            </div>        <div class="pic">            </div>        <div class="pic">            </div>        <div class="pic">            </div>        <div class="pic">            </div>        <div class="pic">            </div>        <div class="pic">            </div>        <div class="pic">            </div>     <div class="pic">            </div>        <div class="pic">            </div>        <div class="pic">            </div></div>

Why do we need so many images for a large div package and a small div package? The reason is that at the beginning, the images will fill the screen; otherwise, they will not be beautiful. In addition, jq uses the method of listening to the scroll bar to load images. If there are too few pictures, the scroll bar will not appear. Naturally, the scroll bar event cannot be executed.

Analyze the Display Effect of a piece:

1. The image has a white border and shadow.

2. images are tiled.

*{    padding:0;    margin:0;}#main{    position:relative;}#main .pic{    width:170px;    box-shadow: 0 0 6px #CCCCCC;    float:left;    margin:5px;}#main .pic img{    width:160px;    height:auto;    border: 5px #FFFFFF solid;}

I believe the above Code is well understood, so far the image has been tiled.

3. Arrange images in sequence

Although the image is tiled after the above code is executed, the effect is very poor, and it is not arranged as high and low as the picture shows.

How to achieve high/low sorting:

1. There must be no problem in the first line, because there is no image on each graph in the first line, that is, it is flat;

2. In the second row, you can take the image with the smallest height in the first row, and place the first image in the second row below (use absolute positioning to control the image position here );

3. Insert the first image in the second row, select the shortest image in the first row, and put the image below.

Function waterFall () {var divWidth = $ ("# main. pic "). eq (0 ). width () + 10; // obtain the div width of the wrapped image on the page. Here, + 10 is used because the margin set in css is 5px, the sum of left and right is 10 (equivalent to the actual width of this div 10 PX more than the preset) var num = Math. floor ($ (window ). width ()/divWidth); // Math. the floor is rounded down to get the width of the entire browser divided by "the width of the image" to get the number of columns that the image can emit, this is the reason for downgrading $ ("# main" ).css ({// set the width of the entire div and show it in the center "width": divWidth * num, "margin": "0 auto"}); var picArr = []; // defines an array $ ("# main. pic "). each (function (index) {// traverses all. pic div var picHeight = $ ("# main. pic "). eq (index ). height (); // obtain the height of each div if (index <num) {// if it is the first line picArr [index] = picHeight; // store the height in the array} else {// If the array is not the first row of Data var minH = Math. min. apply (null, picArr); // obtain the smallest var minIndex in the array =$. inArray (minH, picArr); // obtain the index (location) of the smallest height (this).css ({// set the position of this div "position": "absolute", "top ": minH + 10, // set the distance from the top. Add 10 here because the margin value set in css is 5px, and the upper and lower values are 10px "left": $ ("# main. pic "). eq (minIndex ). position (). left // obtain the distance from the left of the minimum height}); picArr [minIndex] + =$ ("# main. pic "). eq (index ). height () + 10; // store the smallest height in the array }});}

After the page is loaded, execute the waterFall () method. This sentence will not be written. So far, we can see that the images are arranged in order.

4. Waterfall stream implementation

Idea: This is to listen to the browser's scroll bar. When the scroll bar reaches the bottom, it loads the picture in the pre-array.

$(window).on("load",function(){    waterFall();    var pics = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];    window.onscroll = function(){        if ($(document).scrollTop() >= $(document).height() - $(window).height()) {            $.each(pics,function(index,value){                $(".pic").eq(0).clone().appendTo("#main").find("img").attr("src","img/"+value);                });            waterFall();        }    }});

The appendTo () method inserts the specified content at the end of the selected element (still inside.

Of course, the image is loaded only when the browser's scroll bar reaches the bottom. if you feel that the user experience is poor, you can set it in if, for example, if ($ (document ). scrollTop () + 100 >=$ (document ). height ()-$ (window ). height ())