Question

我正在使用Ben Holland的教程开发一个插板式博客（如Pinterest）。每个块都有一个绝对位置，其位置（顶部和左侧）使用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;

问题： 我需要将第一个块设置为的宽度是所有其他的两倍，并确保元素的定位没有被折叠。 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

如果你使用jQuery，它会使javascript中的选择器变得更容易。你可以这样做：

$(document).ready(function() {
    var colWidth = 300;
    var bigWidth = 2 * colWidth;
    $('.block:first-child').css({'width': bigWidth + 'px'});
}

当然你也可以将bigWidth设为一个值为＆＃39; 610px＆＃39;的字符串，但是在你将其实际应用于css之前将其保留为数字是我推荐的，更适合计算。那是你想知道的吗？

PS。如果您以前没有使用过jQuery，那么您需要做的只是在之前链接到任何其他脚本：

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

PPS：你也可以使用：nth-child（）选择器：

$('.block:nth-child(1)').css({'width': bigWidth + 'px'});

Answer 2

我尝试使用Masonry（http://masonry.desandro.com），我认为我已经达到了你想要的效果。这是小提琴：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; }

Pinboard样式网格：使用JS将第一个元素扩大两倍

2 个答案: