0

我希望有人能说出这种布局叫什么？ 见链接

我的意思是，盒子排列得很漂亮，没有多余的空间。我什至看过网站，如果其中一个框被放大或其他东西，它们会重新排列。

那么，这是如何完成的呢？它只是纯 CSS，通过浮点数或其他东西，还是涉及 javascript 等？

提前致谢。

4

3 回答 3

2

这叫做砌体

Masonry 是一个 JavaScript 网格布局库。它的工作原理是根据可用的垂直空间将元素放置在最佳位置，有点像石匠在墙上安装石头。您可能已经在整个 Internet 上看到了它的使用情况。

资源

我希望这就是你要找的。

于 2013-09-09T13:03:01.993 回答
2

它被称为Cascading grid layout, 使用CSSand , 在http://masonry.desandro.com/JavaScript上查看更多信息

于 2013-09-09T13:03:20.473 回答
0

pinterest 布局？

如果您只想使用 CSS，这里有一个仅使用 CSS3 的教程，非常令人印象深刻。

从无序列表开始：

<div id="container">
  <ul id="myContent"> 
      <li><img src="image1" alt=""></li>
      <li><img src="image2" alt=""></li>
     <li><img src="image3" alt=""></li>
     <li><img src="image4" alt=""></li>
     . . .
    </ul>
</div>

然后应用 CSS：

@media only screen and (max-width : 1199px),
only screen and (max-device-width : 1199px){
    #myContent {
        -moz-column-count: 5;
        -moz-column-gap: 0px;
        -webkit-column-count: 5;
        -webkit-column-gap: 0px;
        column-count: 5;
        column-gap: 0px;
        width: 1000px;
    }

    #container {
        width: 1000px;
    }
}

@media only screen and (max-width : 999px),
only screen and (max-device-width : 999px){
    #myContent {
        -moz-column-count: 4;
        -moz-column-gap: 0px;
        -webkit-column-count: 4;
        -webkit-column-gap: 0px;
        column-count: 4;
        column-gap: 0px;
        width: 800px;
    }

    #container {
        width: 800px;
    }
}

@media only screen and (max-width : 799px),
only screen and (max-device-width : 799px){
    #myContent {
        -moz-column-count: 3;
        -moz-column-gap: 0px;
        -webkit-column-count: 3;
        -webkit-column-gap: 0px;
        column-count: 34;
        column-gap: 0px;
        width: 600px;
    }

    #container {
        width: 600px;
    }
}

@media only screen and (max-width : 599px),
only screen and (max-device-width : 599px){
    #myContent {
        -moz-column-count: 2;
        -moz-column-gap: 0px;
        -webkit-column-count: 2;
        -webkit-column-gap: 0px;
        column-count: 2;
        column-gap: 0px;
        width: 400px;
    }

    #container {
        width: 400px;
    }
}

这是一个 jsfiddle 工作：http: //jsfiddle.net/PJpAt/

于 2013-09-09T13:03:12.007 回答