使用css2的砌体样式可提供更好的浏览器兼容性

Question

有没有办法在css2中进行砌体网格以获得更好的浏览器兼容性？

我知道使用css3属性的方法，但我关心旧的浏览器。 并且砌体js插件太低而无法附加格式化的网格。

谢谢。

Answer 1

是的，可以使用

css2 + jQuery

在此处查看演示 - jsfiddle

<强> HTML

<div id="container">
    <div class="item w1 h1"></div>
    <div class="item w1 h1"></div>
    <div class="item w1 h2"></div>
    <div class="item w2 h1"></div>
    <div class="item w1 h1"></div>
    <div class="item w1 h2"></div>
    <div class="item w2 h1"></div>
    <div class="item w1 h1"></div>
    <div class="item w1 h2"></div>
    <div class="item w1 h1"></div>
    <div class="item w1 h1"></div>
    <div class="item w1 h2"></div>
    <div class="item w2 h1"></div>
    <div class="item w1 h1"></div>
    <div class="item w1 h2"></div>
    <div class="item w2 h1"></div>
    <div class="item w1 h1"></div>
    <div class="item w1 h2"></div>
</div>

<强> CSS

    #container {
    border: 2px solid;
    padding: 5px;
}
.item {
    float: left;
    margin: 5px;
    background: #4D4;
}
.w1 {
    width: 70px;
}
.h1 {
    height: 70px;
}
.w2 {
    width: 150px;
}
.h2 {
    height: 150px;
}

---

CSS3

使用纯css3 演示 - jsfiddle

---

很酷的jQuery插件

• Isotope
• Masonry

[均适用于 IE8 + 和现代浏览器，包括 iOS 和 Android 上的移动浏览器]