网格布局和弹性布局_使用FreeWall轻松创建动态网格布局

最新推荐文章于 2022-10-18 11:20:37 发布

cune1359

最新推荐文章于 2022-10-18 11:20:37 发布

阅读量827

点赞数

文章标签： js javascript python html java ViewUI

如果您熟悉Windows 8或Pinterest，则知道动态网格布局。动态网格是一种布局，您可以根据需要或在调整浏览器的大小时重新排列和重新放置子元素 。 jQuery Masonry是用于创建此布局的流行jQuery插件，但是如果您需要更多选项甚至动画，请查看FreeWall 。

FreeWall是Minh Nguyen的免费jQuery插件，您可以使用它创建许多网格布局类型 ：灵活的布局，都市风格的布局，嵌套的网格，图像布局和流体网格。它还支持响应式设计，因此您可以在台式机，手机或平板电脑上显示您的网站。

最重要的是，它还具有非常漂亮的CSS动画和回调事件，例如onGapFound，onComplete，onResize和onSetBlock。

入门

要开始使用FreeWall，您需要包括jQuery或Zepto框架。在本基本指南中，我们将使用jQuery作为示例来制作常规的网格布局演示。

现在，让我们首先包含jQuery框架以及带有以下代码的FreeWall插件。

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/freewall.js"></script>

我们将为布局的容器显示一些砖块。

<h2>Normal grid</h2>
<div class="free-wall">
	<div class="brick size320"></div>
	<div class="brick size320"></div>
	<div class="brick size320"></div>
	<div class="brick size320"></div>
	<div class="brick size320"></div>
	<div class="brick size320"></div>
</div>

并使用以下样式规则使用320px的width和height值定义我们的积木大小：

.size320 {
	width: 320px;
	height: 320px;
}

现在，添加一些javascript代码。

让它起作用

为了给积木提供随机的颜色，我们将定义一些颜色数组，并使用Math.random()方法将它们应用于积木。

var colour = [
	"rgb(142, 68, 173)",
	"rgb(243, 156, 18)",
	"rgb(211, 84, 0)",
	"rgb(0, 106, 63)",
	"rgb(41, 128, 185)",
	"rgb(192, 57, 43)",
	"rgb(135, 0, 0)",
	"rgb(39, 174, 96)"
];

$(".free-wall .size320").each(function() {
	var backgroundColor = colour[colour.length * Math.random() << 0];
	var bricks = $(this).find(".brick");
	!bricks.length && (bricks = $(this));
	bricks.css({
		backgroundColor: backgroundColor
	});
});

最后，我们将添加功能以使布局显示良好。这就是使FreeWall出色的原因。它具有一些控制网格行为的选项和方法。 FreeWall提供的选项包括：

animate : true, // True to make block move with animation.
block.flex : true, // True to made block can resize a bit to fit.
cell.width : number,
cell.height : number,
fillGap : true, // True will made layout without gap.
gutter : mixed, // The spacing between the blocks.
selector : string, // Get all blocks to made layout.

让我们使用以下代码调用该插件。

$(function() {
	$(".free-wall").each(function() {
		var wall = new freewall(this);
		wall.reset({
			selector: '.size320',
			cellW: function(container) {
				var cellWidth = 320;
				if (container.hasClass('size320')) {
					cellWidth = container.width()/2;
				}
				return cellWidth;
			},
			cellH: function(container) {
				var cellHeight = 320;
				if (container.hasClass('size320')) {
					cellHeight = container.height()/2;
				}
				return cellHeight;
			},
			fixSize: 0,
			gutterY: 20,
			gutterX: 20,
			onResize: function() {
				wall.fitWidth();
			}
		})
		wall.fitWidth();
	});
	$(window).trigger("resize");
});

如您在上面的功能代码中看到的，我们使用了一些FreeWall选项，方法和事件。像fixSize ， gutterY ， gutterX ， onResize和fitWidth 。如果您想使用其他选项，方法或事件，可以在FreeWall官方主页上找到文档。

现在，您可以在演示页面上看到动态网格布局的运行情况。如果您调整浏览器的大小，积木将自动重新排列和调整大小。