使用flexbox获得pinterest或jQuery砌体布局

Question

想知道是否有可能只使用新的flexbox布局获得与pinterest或jQuery砌体相同类型的设计布局.这是我得到它:

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}
.item {
    width: 220px;
    height: 250px;
    margin: 10px auto;
    padding: 0;
    background: #ccc;
}
.item:nth-child(3n+2) {
    background: #aaa;
    height: 400px;
}

和HTML我只是使用PHP循环来创建12个项目

<?php
    for ($i=0; $i<=11; $i++) {
        echo '<div class="item"></div>';
    }
?>

Answer 1

这完全有可能.

感谢@ leopld的原始答案,我能够创建一个不依赖于固定高度的答案.

通过使柔性容器position: absolute或者position: fixed,你能得到它的动态填充可用空间.

链接到Codepen:http://codepen.io/anon/pen/Jpnyj？edit = 110 .我包含了您目前需要的所有供应商前缀.

标记

<div class="wrapper">
    <div class="box box-red"></div>
    <div class="box box-blue"></div>
    <div class="box box-pink"></div>
    <div class="box box-purple"></div>
    <div class="box box-green"></div>
    <div class="box box-yellow"></div>
    <div class="box box-brown"></div>
    <div class="box box-red"></div>
    <div class="box box-blue"></div>
    <div class="box box-pink"></div>
    <div class="box box-purple"></div>
    <div class="box box-green"></div>
    <div class="box box-purple"></div>
    <div class="box box-green"></div>
    <div class="box box-yellow"></div>
    <div class="box box-blue"></div>
    <div class="box box-pink"></div>
    <div class="box box-purple"></div>
    <div class="box box-green"></div>
    <div class="box box-yellow"></div>
    <div class="box box-red"></div>
    <div class="box box-brown"></div>
    <div class="box box-blue"></div>
    <div class="box box-red"></div>
    <div class="box box-green"></div>
    <div class="box box-yellow"></div>
    <div class="box box-brown"></div>
</div>

样式

body {
    background: black;
}

.wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column wrap;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
}

.box {
    margin: 5px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
}

.box-red {
    height: 100px;
    background: red;
}

.box-blue {
    height: 120px;
    background: blue;
}

.box-pink {
    height: 144px;
    background: pink;
}

.box-purple {
    height: 250px;
    background: purple;
}

.box-green {
    height: 200px;
    background: green;
}

.box-yellow {
    height: 20px;
    background: yellow;
}

.box-brown {
    height: 290px;
    background: brown;
}

Answer 2

CSS3的列将使您非常接近该布局.(请注意,非最近浏览器中的支持可能很差,并且规范可能在将来发生变化.)另一个示例不适用于FF,但是这个示例:

HTML:

<div id="wrapper">
    <div id="cols">
        <div class="item">
          <img src="http://placekitten.com/400/700?image=1" />
            <p>0) Craft beer farm-to-table.</p>
        </div>
        <div class="item">
            <img src="http://placekitten.com/400/450?image=2" />
            <p>1) Mollit wolf veniam, leggings art party semiotics Brooklyn High Life sustainable occaecat Banksy actually.</p>
        </div>
        [more items]
    </div>
</div>

CSS:

h1,h2,ul,p {margin:1rem; }

#wrapper {
    width: 900px;    
    margin: 20px auto;
    padding: 10px;
    outline: solid black 1px;
    background-color: gainsboro;  
}

#cols {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
}

.item {
    display: inline-block;
    background: #FEFEFE;
    margin: 0;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 10px;
}

.item img {
    width: 100%;
    border-bottom: 1px solid black;
    padding-bottom: 10px;
    margin-bottom: 5px;
}

.item p {
    font-size:small;
    margin: 0;
}

或者玩完整的例子.