纯CSS中的Pinterest样式列布局

Pinterest launched three years ago with a signature and immediately emulated visual style: vertical columns of collected snippets. Pinterest uses JavaScript to achieve this layout, but for a long time I’ve wanted to replicate it using CSS alone. Based on the pioneering work of Kushagra Agarwal and using the outstanding illustrations of Claire Hummel, I’m pleased to offer this solution.

Pinterest于三年前推出，具有标志性，并立即模仿了视觉样式：收集的摘要的垂直列。 Pinterest使用JavaScript来实现这种布局，但是很长一段时间以来，我一直想单独使用CSS复制它。 基于库莎格拉·阿加瓦尔 ( Kushagra Agarwal)的开创性工作，并使用克莱尔·胡梅尔 ( Claire Hummel)的出色插图，我很高兴提供此解决方案。

实现布局 (Achieving The Layout)

The pictures and their captions are entered as semantic HTML5 (I’ll show just the first two images, as the code quickly becomes repetitive):

这些图片及其标题输入为语义HTML5 (我将仅显示前两张图片，因为代码很快就会重复出现)：

<div id="columns">
	<figure>
		<img src="cinderella.jpg" alt>
		<figcaption>Cinderella wearing European fashion of the mid-1860’s</figcaption>
	</figure>
	<figure>
		<img src="rapunzel.jpg" alt>
		<figcaption>Rapunzel, clothed in 1820’s period fashion</figcaption>
…
</div>

CSS multi-column layout is perfect suited to achieving this effect. The code is shown sans vendor prefixes for clarity:

CSS多列布局非常适合实现此效果。 为了清楚起见，该代码显示为无 厂商前缀 ：

#columns {
	column-width: 320px;
	column-gap: 15px;
	width: 90%;
	max-width: 1100px;
	margin: 50px auto;
}

Setting the columns to a fixed width paradoxically makes them more responsive: the spec says that the browser must base its layout of the columns on the answer to the question “how many 320px wide columns (plus any gap) can fit evenly into the space provided?” After that calculation the layout is achieved: 6 columns or 1, whatever works.

将列设置为固定宽度会自相矛盾，以使其响应速度 更快 ：规范指出，浏览器必须根据“有多少320px宽的列​​(加上任何间隙)可以均匀地容纳在所提供的空间中”这一问题的答案来确定列的布局？” 计算完成后，布局便达到了：6列或1列，无论如何工作。

The CSS for the individual <figure> elements and the images they contain is almost as straightforward:

各个<figure>元素CSS及其包含的图像几乎一样简单：

div#columns figure {
	background: #fefefe;
	border: 2px solid #fcfcfc;
	box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
	margin: 0 2px 15px;
	padding: 15px;
	padding-bottom: 10px;
	transition: opacity .4s ease-in-out;
	column-break-inside: avoid;
	display: inline-block;
}
div#columns figure img {
	width: 100%;
	height: auto;
	border-bottom: 1px solid #ccc;
	padding-bottom: 15px;
	margin-bottom: 5px;
}

column-break-inside: avoid; should be enough to force each <figure> element to fall completely inside the column it starts within, without “slopping over” to the next, but no browser completely adheres to that rule yet. To get around that, I’ve added display: inline-block to the rule.

column-break-inside: avoid; 应该足以迫使每个<figure>元素完全落入它开始的列之内，而不会“滑到”下一个，但是还没有浏览器完全遵守该规则。 为了解决这个问题，我在规则中添加了display: inline-block 。

Finally, we use the deeply unappreciated :not pseudo-selector to create the hover effect, using the transition we added earlier to the <figure> elements:

最后，使用之前:not添加到<figure>元素的过渡，使用深深欣赏的:not伪选择器创建悬停效果：

div#columns:hover figure:not(:hover) {
	opacity: 0.4;
}

Translated into English, the selector reads “if the user is hovering anywhere in the container element, set the figure elements inside to opacity: 0.4, except for any figure element that the user is hovering over directly”.

翻译成英文，选择器显示为“如果用户将鼠标悬停在容器元素中的任何位置，则将用户内部的图形元素设置为不透明度：0.4， 除非用户直接将其悬停在任何图形元素上”。

Webkit has an acknowledged set of layout bugs that occur during element interaction within a multi-column layout. I’ve removed the rollover transition effects for Chrome and Safari until these issues are resolved.

Webkit具有一组公认的布局错误，这些错误在多列布局中的元素交互期间发生。 在解决这些问题之前，我已经删除了Chrome和Safari的过渡过渡效果。

移动注意事项 (Mobile Considerations)

Finally, you could add an @media query at the end to tidy up the presentation at small screen sizes:

最后，您可以在最后添加一个@media查询 ，以小屏幕尺寸整理演示文稿：

@media screen and (max-width: 750px) {
	#columns { column-gap: 0px; }
	#columns figure { width: 100%; }
}

备择方案 (Alternatives)

It’s possible to use flexbox to achieve this layout; the only condition is that the outer container must have an explicit height, otherwise the inner items will continue in a single unbroken column.

可以使用 flexbox实现此布局； 唯一的条件是外部容器必须具有明确的高度，否则内部项目将在单个连续列中继续。

There’s also a lot of code repetition in the HTML: adding an image to the layout requires wrapping it in a <figure> element and inserting <figcaption> text. This process can be automated with JavaScript, while preserving the principles of progressive enhancement.

HTML中也有很多代码重复：将图像添加到布局需要将其包装在<figure>元素中并插入<figcaption>文本。 可以使用JavaScript自动执行此过程 ，同时保留渐进增强的原理。

翻译自: https://thenewcode.com/825/Pinterest-Style-Column-Layout-In-Pure-CSS