如何创build网格/瓷砖视图?

例如,我有一些类.article,我想查看这个类作为网格视图。 所以我应用了这种风格:

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

这种风格将使.article看起来平铺/网格。 这是固定的高度工作正常。 但是,如果我想将高度设置为自动(根据其中的数据自动拉伸),网格看起来很讨厌。

在这里输入图像描述

我想要这样的看法:

在这里输入图像描述

这种布局被称为砌体布局 。 砌体是另一个网格布局,但它会填写由元素的高度不同造成的空白。

jQuery Masonry是jQuery插件之一,用于创build砌体布局。

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

您可以使用flexbox。

  1. 将您的元素放置在多行列柔性容器中

     #flex-container { display: flex; flex-flow: column wrap; } 
  2. 对元素进行重新sorting,以便DOM顺序在水平方向而不是垂直方向。 例如,如果你想要3列,

     #flex-container > :nth-child(3n + 1) { order: 1; } /* 1st column */ #flex-container > :nth-child(3n + 2) { order: 2; } /* 2nd column */ #flex-container > :nth-child(3n + 3) { order: 3; } /* 3rd column */ 
  3. 在每列的第一项之前强制列中断:

     #flex-container > :nth-child(-n + 3) { page-break-before: always; /* CSS 2.1 syntax */ break-before: always; /* New syntax */ } 

    可悲的是,并非所有的浏览器都支持flexbox中的换行符。 不过,它适用于Firefox。

 #flex-container { display: flex; flex-flow: column wrap; } #flex-container > :nth-child(3n + 1) { order: 1; } /* 1st column */ #flex-container > :nth-child(3n + 2) { order: 2; } /* 2nd column */ #flex-container > :nth-child(3n + 3) { order: 3; } /* 3rd column */ #flex-container > :nth-child(-n + 3) { page-break-before: always; /* CSS 2.1 syntax */ break-before: always; /* New syntax */ } /* The following is optional */ #flex-container > div { background: #666; color: #fff; margin: 3px; display: flex; justify-content: center; align-items: center; font-size: 36px; } #flex-container > :nth-child(1) { height: 100px; } #flex-container > :nth-child(2) { height: 50px; } #flex-container > :nth-child(3) { height: 75px; } #flex-container > :nth-child(4) { height: 50px; } #flex-container > :nth-child(5) { height: 100px; } #flex-container > :nth-child(6) { height: 50px; } #flex-container > :nth-child(7) { height: 100px; } #flex-container > :nth-child(8) { height: 75px; } #flex-container > :nth-child(9) { height: 125px; } 
 <div id="flex-container"> <div>1</div><div>2</div><div>3</div> <div>4</div><div>5</div><div>6</div> <div>7</div><div>8</div><div>9</div> </div> 

现在,CSS3可以通过主stream浏览器获得广泛的兼容性,而且它的时间只需要一个纯粹的解决scheme,就可以使用SO的代码片段工具:


为了使用CSS3创build砌体布局, column-countcolumn-gap就足够了。 但是我也使用media-queries来使其响应。

在深入实施之前,请考虑添加一个jQuery Masonry库回退以使您的代码与旧版浏览器兼容,特别是IE8-更安全:

 <!--[if lte IE 9]> <script src="/path/to/js/masonry.pkgd.min.js"></script> <![endif]--> 

开始了:

 .masonry-brick { color: #FFF; background-color: #FF00D8; display: inline-block; padding: 5px; width: 100%; margin: 1em 0; /* for separating masonry-bricks vertically*/ } @media only screen and (min-width: 480px) { .masonry-container { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; } } @media only screen and (min-width: 768px) { .masonry-container { -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; } } @media only screen and (min-width: 960px) { .masonry-container { -moz-column-count: 5; -webkit-column-count: 5; column-count: 5; } } 
 <div class="masonry-container"> <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div> <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div> <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 </div> <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div> <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div> <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div> <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div> </div> 

解决这个只有CSS的最佳select是使用CSS列数属性。

  .content-box { border: 10px solid #000000; column-count: 3; } 

查看更多信息: https : //developer.mozilla.org/en/docs/Web/CSS/column-count

使用CSS网格模块,您可以创build一个非常相似的布局。

Codepen演示

1)设置三个固定宽度的网格列

 ul { display: grid; grid-template-columns: 150px 150px 150px; ... } 

2)确保大高度项目跨度2行

 li:nth-child(1), li:nth-child(3), li:nth-child(5), li:nth-child(8), li:nth-child(9), li:nth-child(10), li:nth-child(12) { grid-row: span 2; } 
 body { margin: 0; } ul { display: grid; grid-template-columns: 150px 150px 150px; grid-gap: 1rem; justify-content: center; align-items: center; /* boring properties: */ list-style: none; width: 90vw; height: 85vh; margin: 4vh auto; border: 5px solid green; padding: 1rem; overflow: auto; counter-reset: item; } li { position: relative; } li:after { content: counter(item); counter-increment: item; position: absolute; padding: 0.3rem; background: salmon; color: white; left:0; top:0; } img { outline: 5px solid salmon; } li:nth-child(1), li:nth-child(3), li:nth-child(5), li:nth-child(8), li:nth-child(9), li:nth-child(10), li:nth-child(12) { grid-row: span 2; } 
 <ul> <li><img src="http://lorempixel.com/150/150/animals" alt="" /></li> <li><img src="http://lorempixel.com/150/50/animals" alt="" /></li> <li><img src="http://lorempixel.com/150/140/animals" alt="" /></li> <li><img src="http://lorempixel.com/150/80/animals" alt="" /></li> <li><img src="http://lorempixel.com/150/220/animals" alt="" /></li> <li><img src="http://lorempixel.com/150/120/animals" alt="" /></li> <li><img src="http://lorempixel.com/150/70/animals" alt="" /></li> <li><img src="http://lorempixel.com/150/200/animals" alt="" /></li> <li><img src="http://lorempixel.com/150/230/animals" alt="" /></li> <li><img src="http://lorempixel.com/150/240/animals" alt="" /></li> <li><img src="http://lorempixel.com/150/130/animals" alt="" /></li> <li><img src="http://lorempixel.com/150/160/animals" alt="" /></li> </ul> 

那些正在使用引导框架的人,如果他们不想使用其他任何东西,他们可以做下面的事情。

 <div class="container"> <div class="row"> <div class="col-md-6"> <!-- Now using divs keep adding data content in specific format, just don't add height explicitly--> <div> </div> </div> <div class="col-md-6"> <!-- Now using divs keep adding data content in specific format, just don't add height explicitly--> <div></div> </div> </div> </div>