html5 – 响应式布局不均匀高度

过去几天我一直试图解决如何处理某个网页设计的问题,但到目前为止,我还没有能够提出任何优雅的解决方案.

为了简要总结设计,有3列容器,其中容器具有不均匀(动态生成)的高度但具有相同(流体)宽度.它们需要布置成它们按照从左到右的数字顺序排列;即顶行1-2-3,第二行4-5-6,依此类推.

现在,真正破坏我的坚果的是试图使这个排列整齐,而容器之间没有很多不必要的“垂直间距”.我已经创建了以下模拟代码(也可以作为代码块下面的JSFiddle)来说明:

HTML

<div class="wrapper" id="wrapper">
    <div class="container small"  id="container_1">1</div>
    <div class="container large"  id="container_2">2</div>
    <div class="container small"  id="container_3">3</div>
    <div class="container medium" id="container_4">4</div>
    <div class="container small"  id="container_5">5</div>
    <div class="container medium" id="container_6">6</div>
    <div class="container large"  id="container_7">7</div>
    <div class="container medium" id="container_8">8</div>
    <div class="container large"  id="container_9">9</div>
    <div class="clearfix"></div>
</div>

CSS

.wrapper {
    width: 100%;
    padding: 5%;
}
.clearfix {
    clear: both;
}
.container {
    display: block;
    float: left;
    width: 25%;
    margin: 2.5%;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}
.small {
    height: 100px;
    background: red;
}
.medium {
    height: 150px;
    background: green;
}
.large {
    height: 200px;
    background: blue;
}

JSFiddle:http://jsfiddle.net/tzikas/MYgNx/

注意:由于列布局本身最终会根据设备宽度分解为两个/一个列,因此我在JSFiddle中包含了一个简单的“切换布局”按钮来模拟它.

我想帮助解决的问题如下:

>我如何摆脱每个之间过多的垂直间距
例如,“1”和“5”或“2”和“6”?
>我如何获得“4”的位置
本身低于“1”而不是低于“3”(同时也解决
前一点)?

我想要通过任何类型的脚本来操作DOM来解决这个问题,但是如果我必须那么mooTools是我的首选毒药.

解决方法

根据您的要求.您可以使用 http://masonry.desandro.com/.

相关文章

HTML5不是新事物。自从最初发布(2008年1月)以来,我们一直在使用它的一些功能。后来,我再次仔细查看...
Pointer Events API 是Hmtl5的事件规范之一,它主要目的是用来将鼠标(Mouse)、触摸(touch)和触控笔(...
CSS动画非常的有趣;这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果。其中代表...
clip-path介绍 clip-path 直译过来就是裁剪路径,使用SVG或形状定义一个HTML元素的可见区域的方法。想象...
语法 必需。动画时长的百分比。 合法的值: 0-100% from(与 0% 相同) to(与 100% 相同) 定义和用法...
基本代码 html代码: 首先定义一些基本的样式和动画: background-size: auto 100%; 这段代码的意思是让...