JQuery Wookmark Waterfall Flow Layout

Waterfall Flow layout is very suitable for a large number of pictures of the display, a change in the past to cut the size of the uniform layout of the picture, each picture can be fully displayed, and patchwork, let a person in front of a bright.

Version:

jQuery v1.4.3+

jQuery wookmark v1.4.8

Precautions:

The

width and Height properties of the IMG element in the project need to be written, otherwise the positioning will be inaccurate. (You can use JavaScript in real-time to get the width of the picture, but the number of pictures too much, it will be an unreliable thing, if you are determined to do so, you can refer to this demo)

Loading JavaScript files

1 <script src= "Jquery.js" ></script> 2 <script src= "Jquery.wookmark.js" >< /script>

CSS Styles

1 /* 2  34  */5#list{position:  Relative6#list li{display:none

DOM structure

1 <!--2 in this case, $ ("#list") is the parent container, and the internal Li is the project for the waterfall flow layout. Of course, you can also use div or other tags to write. 3 The width and Height properties of the IMG element in the project need to be written, otherwise the positioning will be inaccurate. 4  -5 <ul id= "List" >6 <li> height=" ><p>text</p></li>7 <li><p>text</p></li>8     ... 9 <li> height=" ><p>text</p></li>Ten </ul>

Call Wookmark

1 $ (' #list li '2  3//4 $ (' #list li '  5     Container: $ (' #list '6     offset:107     8

Manually triggering layout events

1 // as required, can be manually triggered re-layout 2 $ (' #list '). Trigger (' Refreshwookmark ');

This article is derived from this

JQuery Wookmark Waterfall Flow Layout