jquery masonry 布局问题

Question

我正在尝试设置一个 jquery masonry 布局，但该布局存在一些问题。我尝试了几种不同的方法，但我无法让我的盒子正确放置。

这是我正在处理的网站:

http://bluefish.website.2014.360southclients.com/

我需要盒子像这样放置(但我似乎无法弄清楚):

 --------    --    --
|        |  |  |  |  |
|        |   --    --
|        |   --------
|        |  |        |
 --------   |        |
 --    --   |        |
|  |  |  |  |        |
 --    --    --------
 --------    --    --
|        |  |  |  |  |
|        |   --    --
|        |   --    --
|        |  |  |  |  |
 --------    --    --

这是 HTML:

<div class="grid-wrap">
  <div class="block-wrap large">
    <div class="block image light-blue white"> xxx </div>
  </div>
  <div class="block-wrap small">
    <div class="block text-only purple white"> text here </div>
  </div>
  <div class="block-wrap small">
    <div class="block text-only aqua white"> text here </div>
  </div>
  <div class="block-wrap large">
    <div class="block image med-blue white"> xxx </div>
  </div>
  <div class="block-wrap small">
    <div class="block text-only light-aqua white"> text here </div>
  </div>
  <div class="block-wrap small">
    <div class="block text-only blue white"> text xhere </div>
  </div>
  <div class="block-wrap large">
    <div class="block image med-blue white"> xxx </div>
  </div>
  <div class="block-wrap small">
    <div class="block text-only dark-blue white"> text here </div>
  </div>
  <div class="block-wrap small">
    <div class="block text-only light-blue white"> text here </div>
  </div>
  <div class="block-wrap small">
    <div class="block text-only light-aqua white"> text here </div>
  </div>
  <div class="block-wrap small">
    <div class="block text-only"> text here </div>
  </div>
</div>

这是 CSS:

.block-wrap{float:left;padding:0;margin:0 0 20px 0;overflow:hidden}
.block-wrap.small{width:289px;height:289px}
.block-wrap.large{width:598px;height:598px}
.block-wrap .block{width:100%;height:100%}

这是 jQuery:

$(document).ready(function(e) {
  var $container = $('.grid-wrap');
  $container.masonry({
    itemSelector:'.block-wrap',
    gutter:20
 });
});

任何帮助将不胜感激!!

Answer 1

好吧，我想通了这个问题，当我希望列宽为小框时，它得到了第一个更大的框宽度..

$(document).ready(function(e) {
  var $container = $('.grid-wrap');
  $container.masonry({
    columnWidth:289,
    itemSelector:'.block-wrap',
    gutter:20
  });
});