Using jquery to achieve waterfall flow effects learning Notes

jquery has not been a systematic study, only know that JS Library, encapsulated a lot of JS functions, convenient development. Previously done a native image of the waterfall stream effect, super trouble, this time with the jquery method, the instant code condensed, only 56 lines of JS code. Magically let me take a few of these functions to record a specific.

First, create a new project in Webstorm, import the jquery library and a few IMG in the IMG folder, create a new HTML and CSS file to build a basic Web page structure. We set the width of the image fixed, height variable, absolute positioning, left floating. There is no detail here. We mainly talk about the knowledge of the jquery section.

Here we talk about the effect we want to achieve, the waterfall flow effect is visually displayed as a jagged multi-column layout, as the page scroll bar scroll down, this layout will continue to load data and attach to the current trailer. In addition to the first row of elements, the other elements follow the lowest height in the previous arrangement. One cycle. When the screen scrolls, determine the loading conditions, dynamic loading.

Let's go.

(1) The HTML document is loaded as a whole, listening to the window's Load event.

$ (document). Ready (function() {    $ (Windows). On ("load",function() {    };};

(2). Determine the position of the picture. That is, when the picture is more than one line, the rest of the picture should be placed.

functionimglocation () {//use jquery to get all the box    varBox = $ (". Box"); //width of Box    varBoxwidth = Box.eq (0). width (); //there are several boxes in each row    varnum = Math.floor ($ (window). Width ()/boxwidth);//boxheight to store box    varBoxarr = []; //Each method iterates through the box, records boxheight when there is only one row, finds Minboxheight, and sets the style. Box.each (function(index,value) {varBoxheight =Box.eq (index). Height (); if(index<num) {Boxarr[index]=Boxheight; }Else{            varMinboxheight = Math.min.apply (NULL, Boxarr); varMinboxindex =$.inarray (Minboxheight,boxarr); $ (value). css ({"Position": "Absolute",                "Top": Minboxheight,"Left": Box.eq (minboxindex). Position (). left}); //Dynamic Change MinboxindexBoxarr[minboxindex] + =Box.eq (index). Height (); }    });}

(3). Listen for scrolling events on the screen. When the height of the screen is greater than 1/2 of the height of the last picture, the resource is loaded.

function scrollside () {    var box = $ (". Box");     var lastboxheight = Box.last (). Get (0). Offsettop+math.floor (Box.last (). Height ()/2);    var documentheight=$ (document). width ();     var scrollheight=$ (window). scrolltop ();     return (lastboxheight<scrollheight+documentheight)? true:false;}

(4). After the function of the monitor screen is written, we first write a JSON data locally in the load Load event and pass the picture resource.

That is: var dataimg={"Data": [{"src": "1.jpg"},{"src": "2.jpg"},{"src": "3.jpg"},{"src": "4.jpg"},{"src": "5.jpg"}]};

(5). Implement window's Onscroll event. When the conditions for scrolling in (3) are met, we create the box dynamically and then appendto the corresponding parent container

Window.onscroll=function(){            if(Scrollside ()) {//Each () method iterates through the data loaded in$.each (Dataimg.data,function(index,value) {varBox = $ ("<div>"). addclass ("box"). AppendTo ($ ("#container").)); varContent = $ ("<div>"). AddClass ("Content"). AppendTo (box); Console.log ("./img/" +$ (value). attr ("src")); $(") . AppendTo (content);                });            Imglocation (); }        };

So far, the method of using jquery to realize the waterfall stream of photos has been realized. In the process, I learned the main thing

• The each () method iterates through the array,
• EQ ()
• Math.min.apply () finds the smallest number in the array,
• Jquery.inarray (Value,array) determines the position of the first parameter in the array,
• $ (value). CSS uses jquery to set CSS styles,
• Add HTML document nodes dynamically and get the corresponding properties from the JSON data.

The project file is put on the net, the friend can download if necessary. jquery achieves the waterfall flow effect. Link: http://pan.baidu.com/s/1dEEmr5n Password: Cjic

Using jquery to achieve waterfall flow effects learning Notes