jQuery Wookmark 瀑布流布局

最新推荐文章于 2021-06-30 01:11:42 发布

XingKong22star

最新推荐文章于 2021-06-30 01:11:42 发布

阅读量689

点赞数

分类专栏： Front-End 文章标签： js 布局图片

本文链接：https://blog.csdn.net/XingKong22star/article/details/39896445

版权

Front-End 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

瀑布流布局提供了一种美观的方式来展示大量图片，每个图片都能完整显示且布局错落有致。本文介绍了使用jQuery Wookmark插件创建这种效果的方法，包括一个可供参考的DEMO链接和参数说明。

摘要由CSDN通过智能技术生成

瀑布流布局非常适合大量图片的展示，一改过去裁剪图片尺寸统一的排版，每张图片都能完全展示，并错落有致，让人眼前一亮。

注意事项：

项目中的 img 元素的 width 和 height 属性需要写，否则定位会不准确。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Wookmark 瀑布流布局 »</title>
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/layout.css">
</head>
<body>
<div class="wrap">

	<div class="main">
		<div class="inwrap">
			<h1>jQuery Wookmark 瀑布流布局</h1>
			
			<div class="detail">
				<p>所有图片的宽度和高度都已设置，这样可以在图片加载之前就进行布局。</p>
				<p>调整浏览器窗口大小，或者单击列表中的项目时，会触发列表布局更新。</p>
			</div>
			
			<div class="example">
				<div id="main" role="main">
					<ul id="tiles">
						<!-- These are our grid blocks -->
						<li><img src="images/image_1.jpg" width="200" height="283"><p>1</p></li>
						<li><img src="images/image_2.jpg" width="200" height="300"><p>2</p></li>
						<li><img src="images/image_3.jpg" width="200" height="252"><p>3</p></li>
						<li><img src="images/image_4.jpg" width="200" height="158"><p>4</p></li>
						<li><img src="images/image_5.jpg" width="200" height="300"><p>5</p></li>
						<li><img src="images/image_6.jpg" width="200" height="297"><p>6</p></li>
						<li><img src="images/image_7.jpg" width="200" height="200"><p>7</p></li>
						<li><img src="images/image_8.jpg" width="200" height="200"><p>8</p></li>
						<li><img src="images/image_9.jpg" width="200" height="398"><p>9</p></li>
						<li><img src="images/image_10.jpg" width="200" height="267"><p>10</p></li>
						<li><img src="images/image_1.jpg" width="200" height="283"><p>11</p></li>
						<li><img src="images/image_2.jpg" width="200" height="300"><p>12</p></li>
						<li><img src="images/image_3.jpg" width="200" height="252"><p>13</p></li>
						<li><img src="images/image_4.jpg" width="200" height="158"><p>14</p></li>
						<li><img src="images/image_5.jpg" width="200" height="300"><p>15</p></li>
						<li><img src="images/image_6.jpg" width="200" height="297"><p>16</p></li>
						<li><img src="images/image_7.jpg" width="200" height="200"><p>17</p></li>
						<li><img src="images/image_8.jpg" width="200" height="200"><p>18</p></li>
						<li><img src="images/image_9.jpg" width="200" height="398"><p>19</p></li>
						<li><img src="images/image_10.jpg" width="200" height="267"><p>20</p></li>
						<li><img src="images/image_1.jpg" width="200" height="283"><p>21</p></li>
						<li><img src="images/image_2.jpg" width="200" height="300"><p>22</p></li>
						<li><img src="images/image_3.jpg" width="200" height="252"><p>23</p></li>
						<li><img src="images/image_4.jpg" width="200" height="158"><p>24</p></li>
						<li><img src="images/image_5.jpg" width="200" height="300"><p>25</p></li>
						<li><img src="images/image_6.jpg" width="200" height="297"><p>26</p></li>
						<li><img src="images/image_7.jpg" width="200" height="200"><p>27</p></li>
						<li><img src="images/image_8.jpg" width="200" height="200"><p>28</p></li>
						<li><img src="images/image_9.jpg" width="200" height="398"><p>29</p></li>
						<li><img src="images/image_10.jpg" width="200" height="267"><p>30</p></li>
						<!-- End of grid blocks -->
					</ul>
				</div>
			</div>
			
		</div>
	</div>
</div>

<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.wookmark.min.js"></script>
<script>
(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);
</script>
</body>
</html>

IE:http://localhost:8080/JavaRsa/MyWeekMark.jsp

运行效果：

demo已上传至我的资源

参数说明

名称	默认值	说明
container	$('body')	父容器。自定义时需要给父容器设置 CSS 属性 "position: relative"。
align	'center'	对齐方向，可设置为："left", "right", "center"。
direction	undefined	排序方向。可设置为："left"（从左至右）, "right"（从右至左）若不设置，则判断 align 为 "right" 时，direction 为 "right"，否则默认为 "left"。
autoResize	false	是否在浏览器窗口大小变化时进行重新布局。
resizeDelay	50	检测自动重新布局的间隔时间 (ms)。
itemWidth	0	列表项目的宽度 (px 或 %)。
flexibleWidth	0	列表项目自适应的最大宽度。该项设置时，itemWidth 的值作为列表项目的最小宽度。
offset	2	列表项目的间距 (px)，横向纵向相同。
verticalOffset	undefined	列表项目纵向的间距 (px)，与 offset 配合即可分别设置横向与纵向的间距。
outerOffset	0	外部间距，与父容器顶部的间距。
ignoreInactiveItems	true	是否隐藏被过滤的项目。
fillEmptySpace	false	是否填充底部占位符。占位符的 class 为 "wookmark-placeholder"。
comparator	null	自定义排序方法。
possibleFilters	[]
onLayoutChanged	undefined	布局变化时触发的函数。