Question

我希望有人能说出这种布局是什么？ See link

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

那么，这是怎么做到的？它只是纯粹的CSS，通过花车或其他东西，还是涉及到javascript等？

提前致谢。

Answer 1

这称为MASONRY

Masonry是一个JavaScript网格布局库。它通过放置工作基于可用垂直空间的最佳位置的元素，排序就像石匠在墙上贴石头一样。你可能已经看过了在互联网上使用。

<强> SOURCE

我希望这就是你要找的东西。

Answer 2

使用Cascading grid layout和CSS称为JavaScript，请参阅http://masonry.desandro.com/

Answer 3

pinterest布局？

如果你只想在这里使用CSS只有一个tutorial using 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/

这种布局叫做什么？

3 个答案: