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 Load 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)

• View Demo
• Download JQuery Wookmark Load v1.4.8

How to use

Loading JavaScript files

1 <  src= "Jquery.js"></script>2<  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 <ulID= "List"> 6   <Li><imgsrc= "Pic_1.jpg"width= "$"Height= "283"><P>Text</P></Li> 7   <Li><imgsrc= "Pic_2.jpg"width= "$"Height= "+"><P>Text</P></Li> 8   ... 9   <Li><imgsrc= "Pic_n.jpg"width= "$"Height= "252"><P>Text</P></Li> Ten </ul> 

Call Wookmark

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

Manually triggering layout events

1 //  2 $ (' #list '). Trigger (' Refreshwookmark ');

Parameter description

name	Default Value	Description
Container	$ (' body ')	The parent container. You need to set the CSS property "Position:relative" to the parent container when customizing.
Align	' Center '	The alignment direction can be set to: "Left", "right", "center".
Direction	Undefined	the sort direction. Can be set to: ' Left ' (right-to-left) If not set, the direction is "right" when the align is "right", otherwise the default is "left".
AutoResize	False	Whether to re-layout when the size of the browser window changes.
Resizedelay	50	Detects the interval between automatic re-layout (MS).
Itemwidth	0	The width of the list item (PX or%).
Flexiblewidth	0	The maximum width of the list item's self-adapting. When the item is set, the value of itemwidth is the minimum width of the list item. [Demo]
Offset	2	The spacing (px) of the list items is the same as the horizontal portrait.
Verticaloffset	Undefined	List item Vertical spacing (px), and offset mates to set the horizontal and vertical spacing separately.
Outeroffset	0	The spacing between the outer spacing and the top of the parent container.
Ignoreinactiveitems	True	Whether the filtered items are hidden. [Demo]
Fillemptyspace	False	Whether to populate the bottom placeholder. The placeholder's class is "Wookmark-placeholder". [Demo]
Comparator	Null	Custom sorting methods. [Demo]
Possiblefilters	[]
Onlayoutchanged	Undefined	The function that is triggered when the layout changes.

JQuery Wookmark Waterfall Flow Layout