开始使用jQuery Masonry

  • 所需知识:基本的HTML,CSS和JavaScript / jQuery
  • 要求:文本编辑器,现代浏览器
  • 项目时间:1小时
  • 支持文件1

这篇文章首次出现在问题229.net杂志。

爆炸了Pinterest的已经看到它的设计和用户体验受到称赞。但是,除非你过去两年一直住在一个山洞里,否则你可能在许多小型网站上看到了类似的概念,例如投资组合网站和Tumblr账户。这可以通过石工,jQuery的动态网格布局插件 - Pinterest为此创建了自定义脚本,但这个概念与Masonry相同。 Masonry的创建者David DeSandro将其描述为“CSS浮动的另一面”。在传统的CSS浮动中,对象水平排列然后垂直排列。砌体颠倒了这一点,可以优化网格中的可用空间。

With the recent explosion of attention on Pinterest, there has been an increased emphasis on Masonry

随着最近对Pinterest的关注度不断提高,人们越来越重视砌体

砌体测量您所服务的所有物品,并以空间可用的最佳方式重新排列它们。该解决方案特别适用于基于图像的内容,可以实现拼接在一起的几乎无缝的图像墙。如果没有砌体,这样的设计几乎是不可能的,但插件只需几行JavaScript即可实现。

01.设置砌体

在开始之前,您需要设置基本的HTML,CSS和JavaScript。我已经包含了这个的简化版本HTML5 Boilerplate。在里面Demo.html文件,我添加了10个我希望由Masonry布局的不同元素。这些元素中的每一个都有一类项目并只包含一个图像。我们的Style.css文件File声明这些项目的基本样式,制作它们300像素宽,显示,漂浮剩下并有一个顶部和右边缘20像素

让我们来看看在应用Masonry之前的样子。在您的演示文件中,注释掉的script.js在底部Demo.html文件为'un-Masoned'布局。您会注意到图像之间的垂直间距不一致:连续的较高图像会在其他元素下方创建间隙,从而使您的布局变得模糊。除非您为所控制的所有元素或静态内容设置了特定的裁剪大小,否则以统一方式显示一系列内容的解决方案可能会非常棘手。砌体在这里闪耀,动态优化动态内容的布局。

我们已准备好应用砌体,因此取消注释的script.js。创建一个$(文件)。准备()函数并在我们的内容容器上调用Masonry函数。

$(document).ready(function(){
$( '#内容')。砌筑({
ColumnWidth:320,
ItemSelector:'.item'
})。imagesLoaded(function(){
$( '#内容')砌体( '刷新')。
});
});

砌体有几种选择,但这两种是必不可少的。列宽指定每列的最小宽度。这需要考虑填充和边距,因此320表示300像素宽度的图像加上20像素的右边距。ItemSelector为将受到砌体影响的所有项目指定CSS选择器。我们也打电话给Masonry一个随附的插件ImagesLoaded告诉Masonry重装 - 但我们稍后会谈到。

现在让我们来看看输出;理解如何实现这一点至关重要。我们现在可以看到我们的砌体容器,#内容,已经给了一类。石工并给出相对位置和硬编码高度(以像素为单位)。这样做可以使每个元素或砖块绝对定位,并根据砖块的宽度和高度进行精确的顶部和左侧测量。

02.图像问题

砌体最常见的问题之一是元素,尤其是图像,彼此重叠。砌体通过测量每个可用的砖块来工作,并根据这些测量结果将每个砖块放在一起。问题在于,当砌体测量元素时,图像可能无法加载 - 因此砌体将在没有图像尺寸的情况下测量砖块。这意味着它不是占据图像的整个高度(或宽度),而只占用一行。

有各种方法可以克服这个问题;各有利弊。最常见的解决方案是等待浏览器加载所有图像,然后初始化Masonry。你可以通过使用来实现这一点$(窗口).load()代替$(文件)。就绪()开始你的代码。虽然这为砌体提供了所需的输出,但是让用户等待呈现布局。它还会在没有砌体的情况下显示您的布局的短暂时刻,然后再卡入到位。最后,这个解决方案将您的Masonry代码与JavaScript的其余部分隔开,这会隔离您的逻辑,如果您的代码的其他部分依赖于首先启动的Mason(例如Infinite Scroll),则可能会变得混乱。

If your assets haven’t been preloaded, there’s no way for Masonry to measure their size to place them properly

如果您的资产没有预先加载,那么砌体无法测量它们的尺寸以正确放置它们

更强大的解决方案是在标记中写出每个图像元素的宽度和高度。通过在标记中包含这些值,Masonry将正确测量它们,而不需要等到图像加载以确定其大小。对此的一个主要要求是它要求您将每个维度都可用并存储在数据库中,这并不总是可行的。

由于这个问题很普遍,Masonry随船携带ImagesLoaded,一个插件,是的,告诉你何时加载你的图像。ImagesLoaded有一个回调函数,一旦所有图像都被加载就会执行,这是初始化Masonry的理想位置。我认为最通用的选择是打电话给Masonry的document.ready并在加载图像后重新测量。要做到这一点,你需要使用Masonry重装方法。我更喜欢这个,因为它使您能够将逻辑保持在一个位置,并在图像准备好后强制重新测量。

03.高级用户的想法

恭喜你,你已经设置了你的砌体布局 - 但这只是划破了Masonry可以做的事情的表面。一旦设置了初始Masonry实例,就可以使用插件的方法对其进行修改。这些是砌体内置的附加功能,可帮助它完全按照您的要求进行操作,例如添加和删除项目,重新测量砖块尺寸等等。您还可以选择动画内容,添加新砖块 - 甚至是RTL支持。对于我们的示例,让我们创建一个动画灵活宽度。改变宽度#内容自动和左边距和右边距汽车Style.css文件

#content {
保证金:0自动;
宽度:自动;
}

我们还需要设置IsFitWidth真实地对待我们的砌体设置的script.jsIsFitWidth是Masonry中的一个选项,用于确定浏览器当前宽度可能的最大列数。这对于在没有尴尬空白的情况下集中内容非常有用;如果没有它,砌体将坚持不像柱子那样宽的剩余空间,这意味着你的容器永远不会真正居中。

$( '#内容')。砌筑({
//其他砌体选项
IsFitWidth:true
});

在浏览器中,点击刷新:您现在可以调整浏览器的大小,而Masonry容器将重新计算其宽度以匹配它可以显示的列数。

砌体也可以在这些砖块进入新位置时为它们制作动画,这要归功于它的逻辑剩下最佳每块砖上的CSS值。有多种方法可以实现这一目标,有些方法比其他方法更好。最明显的是使用jQuery,你可以通过调用打开它IsAnimated:是的在拜访砌体的时候。

这样做,但jQuery动画依赖于DOM操作,并且有几个大砖可以减慢动画性能并使体验变得迟钝。另一种实现它的方法是使用CSS过渡,它将动画剩下最佳CSS属性。在jQuery动画中使用CSS转换的所有好处是一个完全独立的讨论,但使用CSS来制作动画更加强大,并且几乎在所有情况下使用Masonry都会表现得更好。要使用CSS过渡,请将这些值放在上面。项目Style.css文件,让剩下过渡到它的新价值,然后是最佳一旦剩下做了动画。

-webkit-transition:left .4s easy-in-out,top .4s easy-in-out .4s;
-moz-transition:左.4s轻松进出,顶级.4s轻松进出.4s;
-ms-transition:left .4s easy-in-out,top .4s easy-in-out .4s;
-o-transition:left .4s easy-in-out,top .4s easy-in-out .4s;
过渡:左侧.4s轻松进出,顶级.4s轻松进出.4s;

虽然过去一年对CSS过渡的支持率一直在飙升,但旧版浏览器并不支持它们,而这些浏览器可能构成了受众群体的重要组成部分。如果你想在不牺牲某些用户动画的情况下使用CSS过渡,那么根据浏览器功能,可以使用这两种动画技术来获得最佳性能。这使用了一个名为的JavaScript库Modernizr的,检测用户的浏览器是否具有可通过的CSS转换等功能Modernizr.csstransitions,设置为真正要么取决于用户对CSS转换的支持。

在您的砌体设置中,您需要调出以下代码。

$( '#内容')。砌筑({
//所有其他砌体选项
IsAnimated:!Modernizr.csstransitions
});

这是执行动画的理想方式,因为您可以为用户提供最佳体验。可以利用CSS过渡的用户能够,而那些不能通过jQuery获得动画的用户。

04.企业使用问题

Masonry在Tumblr和较小的网站中有大量使用,并且很容易初始化。但是为企业使用它进行设置是一个完全不同的球类游戏,它在图像之外的问题重叠。到目前为止,我们总是知道我们的Masoned布局中有多少项目,并且只要没有重叠,就不会介意放置任何元素的位置。

与砌体几乎所有问题的关键是重新加载,因此您可以测量新项目并使它们适合您的布局。有时这说起来容易做起来难,尤其是在加载iframe,嵌入内容或来自第三方脚本的内容时。您可以根据需要扩展Masonry来测量这些元素,然后调用Masonry的重载方法,如下所示:

$( '#内容')砌体( '刷新')。

默认情况下,砌体会优化每个砖块的位置,但有时您需要一块内容在放置位置时保持一致。如果这适用于你,Masonry有一个特色叫CornerStamp使您在某个地方始终拥有砖块。这可以通过插件节省空间来计算布局,这有助于广告位或宣传材料。在这里查找更多关于cornerStamp的信息

05.调试砌体

如果您仍然遇到问题,那里有资源:使用您的控制台,看看发生了什么。从控制台,您可以更新选项,发布方法,检查宽度和高度等。因此,如果没有正确测量一个或多个砖块,您可以从浏览器工具编辑CSS并重新加载Masonry以查看您的更改是否成功。每个Masonry实例的数据也可用。您可以动态编辑选项,看看您的Masoned对象是否已正确初始化。要查看此内容,请在控制台中键入以下内容。

$( '#内容')的数据( '砖石')。

任何使用砌体的人的另一个好主意是看看GitHub上的源代码- 它由DeSandro自己维护。如果您想知道测量是如何发生的,您可以找到执行此操作的功能布局()_placeBrick()。了解插件内部的功能非常重要,特别是如果这是您网站演示的关键。

如果你真的难过,你可以随时转到GitHub上的问题部分。发布问题时,尽量使其具有描述性,并包含指向问题发生位置的链接。能够看到出现问题会使调试变得更加容易,并且可以节省大量的时间。 DeSandro发布了在其Github帐户上提交问题的指南,你可以在这里查看

06.结论

希望这篇文章能够向您展示一些Masonry的功能 - 尽管我只介绍了可能的新功能以及不断开发的新用例。您可以使用Infinite Scroll,多个实例等功能扩展Masonry,以最大限度地提升用户体验。砌体是一个很好的插件,它改变了人们设计和与网络交互的方式。随着更多人参与和贡献,它只会变得更好。

谢谢Jacob Van Loon对于本教程中使用的图像

卢克·舒玛德作为Dazed Digital和AnOther的高级网页设计师,这是英国最大的两个独立时尚和生活方式出版物。



翻译字数超限