如何创建网格/瓷砖视图？ [英] How to Create Grid/Tile View?

问题描述

例如，我有一些类.article，我想将这个类视为网格视图。所以我应用了这种风格：

  .article {
 width：100px; 
 height：100px; 
背景：＃333; 
 float：left; 
 margin：5px; 
} 
  

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

我想让视图像这样：

解决方案

这种布局称为砌体布局即可。砌体是另一个网格布局，但它会填写因元素高度不同而引起的空白。

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

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;
}

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.

And I want to make the view like this:

解决方案

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 is one of jQuery plugin to create masonry layout.

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屋！