css columns/flexbox,项目之间没有间隙

Question

我需要摆脱列布局中元素之间的差距.我可以使用最新的css3,因为该网站针对的是现代浏览器/设备,但我需要避免使用javascript解决方案,以便从服务器提供的页面不需要根据客户端的宽度重新呈现.

使用flexbox,css列和其他技巧我需要哄一个类似于pinterest的布局.(Pinterest使用javascript和绝对定位进行布局,甚至在js关闭的情况下也不会渲染.)该网站的盒子宽度已知但高度可变.列数需要根据浏览器宽度而变化.(如果我知道要改变什么css属性,我可以通过媒体查询来做到这一点.)这是这样的:via

另请注意,我不能只增加容器的高度来填充空白区域.我想把它下面的项目带上去,而不是让所有的高度匹配.(因此,上图中的第1,3和4项不是我想要的.)

我试过的事情:

• CSS 3列.这看起来很棒,但是项目的顺序错误,第二项在第一项之下.如果这可以改为不同的顺序,使它们从左到右,那就太好了!

• Flexbox各种flexbox配置,我已经尝试了几个我能够改变的设置.

• 的JavaScript.是的,我知道我可以手动创建列并在调整大小时重新渲染它们.我希望避免昂贵的重新渲染操作,需要手动平衡列和显示.对于不支持css3解决方案的旧版浏览器,我可以使用它.我也想避免手动定位所有项目.毛.

我给JSFiddle添加了一个注释链接,因为我不能把它放在这里作为"链接到jsfiddle需要代码".

Answer 1

检查这个演示。这是纯css3砌体效果。 http://w3bits.com/labs/css-masonry/

来自上面链接的尖晶石

body {
    font: 1em/1.67 'Open Sans', Arial, Sans-serif;
    margin: 0;
    background: #e9e9e9;
}

.wrapper {
    width: 95%;
    margin: 3em auto;
}

.masonry {
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: .85em;
}

.item {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
    height: 150px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
}
.item.black{
background-color: #000; height:200px;}
.item.blue{
background-color:blue; height:250px;}
.item.green{
background-color:green; height:300px;}

@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}

@media only screen and (min-width: 1280px) {
    .wrapper {
        width: 1260px;
    }
}

<div class="masonry">
   <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
   <div class="item black">...</div>
   <div class="item blue">...</div>
   <div class="item green">...</div>
  <div class="item black">...</div>
   <div class="item blue">...</div>
   <div class="item green">...</div>
  <div class="item black">...</div>
   <div class="item blue">...</div>
   <div class="item green">...</div>
</div>

希望这对你有帮助。

Answer 2

使用http://desandro.github.io/masonry/ Masonry 将帮助解决您的问题，这是 Pinterest 使用的。我的公司目前正在使用它来开发一个程序，它非常简单且用户友好。