html瀑布流布局实例,jQuery Wookmark 瀑布流布局 Example 基本示例 - 手册网

jQuery Wookmark 瀑布流布局

Example 基本示例

所有图片的宽度和高度都已设置，这样可以在图片加载之前就进行布局。

调整浏览器窗口大小，或者单击列表中的项目时，会触发列表布局更新。

• 

  1

• 

  2

• 

  3

• 

  4

• 

  5

• 

  6

• 

  7

• 

  8

• 

  9

• 

  10

• 

  11

• 

  12

• 

  13

• 

  14

• 

  15

• 

  16

• 

  17

• 

  18

• 

  19

• 

  20

• 

  21

• 

  22

• 

  23

• 

  24

• 

  25

• 

  26

• 

  27

• 

  28

• 

  29

• 

  30

(function ($){

var handler = $('#tiles li');

handler.wookmark({

// Prepare layout options.

autoResize: true, // This will auto-update the layout when the browser window is resized.

container: $('#main'), // Optional, used for some extra CSS styling

offset: 5, // Optional, the distance between grid items

outerOffset: 10, // Optional, the distance to the containers border

itemWidth: 210 // Optional, the width of a grid item

}

);

// Capture clicks on grid items.

handler.click(function(){

// Randomize the height of the clicked item.

var newHeight = $('img', this).height() + Math.round(Math.random() * 300 + 30);

$(this).css('height', newHeight+'px');

// Update the layout.

handler.wookmark();

}

);

}

)(jQuery);