如何创建网格/平铺视图? [英] How to Create Grid/Tile View?

问题描述

例如，我有一些类 .article，我想以网格视图的形式查看这个类.所以我应用了这种风格:

For example, I have some class .article, and I want to view this class as grid view. So I applied this style:

.article{
  width:100px;
  height:100px;
  background:#333;
  float:left;
  margin:5px;
}

该样式将使 .article 看起来平铺/网格.它在固定高度下工作正常.但是如果我想将高度设置为自动(根据其中的数据自动拉伸)，网格看起来很糟糕.

That style will make the .article look tiled/grid. It's work fine with fixed height. But if I want to set the height to auto (automatically stretch according to the data within it), the grid look nasty.

我想让视图像这样:

推荐答案

这种类型的布局称为砌体布局.Masonry 是另一种网格布局，但它会填充由元素高度不同引起的空白.

This type of layout is called Masonry layout. Masonry is another grid layout but it will fill out the whitespace caused by the difference height of elements.

jQuery Masonry 是用于创建砌体布局的 jQuery 插件之一.

jQuery Masonry is one of jQuery plugin to create masonry layout.

或者，您可以使用 CSS3 columns.但目前基于 jQuery 的插件是最好的选择，因为 CSS3 列存在兼容性问题.

Alternatively, you can use CSS3 columns. But for now jQuery based plugin is the best choice since there is compatibility issue with CSS3 column.

这篇关于如何创建网格/平铺视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！