javascript - 看板式网格 : make first element twice wider with JS

Question

我正在使用 Ben Holland 的教程开发一个钉板式博客(如 Pinterest) .每个 block 都有一个绝对位置，它的位置(顶部和左侧)是用 jQuery 脚本计算的 http://labs.benholland.me/pinterest/js/script-centered.js

查看工作演示:http://labs.benholland.me/pinterest/demo-centered.php

此演示中的所有元素都具有相同的宽度。它在两个地方设置:CSS .block {width: 300px;} 和 JavaScript var colWidth = 300;

问题:我需要使第一个 block 的宽度是所有其他 block 的两倍，并确保元素的定位不会折叠。 Click to see example .

我知道如何完成 CSS 部分:.block:first-child {width: 610px;}(600px+10px 边距)

但由于我对 JavaScript 的了解有限，我无法完成 JavaScript 部分。任何帮助将不胜感激。

谢谢!

---

参见 JSFiddle http://jsfiddle.net/pq8hqabL/ — 仅适用于窗口调整大小

我正在开发的网站上的现场演示 — http://goo.gl/Ckp2Qh

Answer 1

我尝试使用 Masonry ( http://masonry.desandro.com )，我想我已经达到了您想要的效果。这是 fiddle :http://jsfiddle.net/pq8hqabL/1 .

加载了砌体的 HTML:

<div id="wrapper">
    <div class="masonry js-masonry"  data-masonry-options='{ "columnWidth": 241,"gutter":12}'>
        <div class="item w2">
            Lorem ipsum...
        </div>
        <div class="item w2">
            Lorem ipsum...
        </div>
        ...
    </div>
</div>

还有CSS:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#wrapper {
  width: 1024px;
  margin: 0 auto;
}

.masonry {
  background: #EEE;
}

.masonry .item {
  width:  241px;
  padding: 12px;
  margin-bottom: 10px;
  float: left;
  background: #fff;
  border: 1px solid #ddd;
}

.item.w2 { width:  494px; }