编码这些瓷砖系统的最聪明的方法答案

【问题标题】：Smartest way to code these tile systems编码这些瓷砖系统的最聪明的方法
【发布时间】：2014-06-07 06:24:46
【问题描述】：

目前我正在开发一个包含多个此类磁贴系统的网站，您可以在下面看到。

我想知道哪种方式对它们进行编码最好。

我使用了 Masonry，它工作得很好，但它是一个基于 jQuery 的解决方案。 http://jsfiddle.net/xfxYQ/

HTML

<div class="box-container">
    <article class="box span-1x1">1</article>
    <article class="box span-1x1">2</article>
    <article class="box span-2x2">3</article>
    <article class="box span-1x1">4</article>
    <article class="box span-1x1">5</article>
    <article class="box span-2x2">6</article>
    <article class="box span-1x1">7</article>
    <article class="box span-1x2">8</article>
    <article class="box span-1x1">9</article>
</div>

CSS

.box-container {
    width: 240px;
    margin-bottom: 50px;
    background: blue;
}

.box {
    float: left;
    margin-bottom: 10px;
    margin-right: 10px;
    background: red;
}

.span-1x1 {
    width: 50px;
    height: 50px;
}

.span-1x2 {
    width: 50px;
    height: 110px;
}

.span-2x1 {
    width: 110px;
    height: 50px;
}

.span-2x2 {
    width: 110px;
    height: 110px;
}

砌体jQuery

var $container = $('.box-container');

$container.masonry({
    itemSelector: '.box'
});

有人对纯 HTML/CSS 解决方案有聪明的想法吗？

【问题讨论】：

标签： jquery masonry

【解决方案1】：

有很多 CSS 网格框架旨在创建这样的东西。

960.gs 也是一个基于 CSS 的网格框架。它没有Javascript int，所以你可以看看在它的架构上，甚至使用那个架构。

如果你想要一些动画或其他东西，如果你真的不想要的话，你可以用 CSS3 动画它想要在其中使用任何 Javascript（我也不喜欢）。

祝你好运。

【讨论】：

【解决方案2】：

您肯定需要将 HTML 分成几列。基本上，这将需要相当多地重写该 HTML。例如在这个jsFiddle:

<div class="box-container cf">
  <div class="column">
    <div class="box span-1x2">0</div>
  </div>
  <div class="column">
    <div class="box span-1x1">1</div>
    <div class="box span-1x1">2</div>
  </div>
  <div class="column">
    <div class="box span-2x2">3</div>
  </div>
</div>

【讨论】：