Question

我试图设置jquery砌体布局，并且布局有些问题。我已经尝试了几种不同的方式，但我无法让我的盒子正确坐好。

这是我正在处理的网站：

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
  });
});

Answer 2

我建议将你的div分成两列。

<div class="grid-wrap">
      <div class="block-wrap" data-rowspan="2" data-colspan="2">
        <div class="block image light-blue white"> xxx </div>
      </div>
      <div class="block-wrap" data-rowspan="1" data-colspan="1">
        <div class="block text-only purple white"> text here </div>
      </div>
      <div class="block-wrap" data-rowspan="1" data-colspan="1">
        <div class="block text-only aqua white"> text here </div>
      </div>
      <div class="block-wrap" data-rowspan="2" data-colspan="2">
        <div class="block image med-blue white"> xxx </div>
      </div>
</div>
<div class="grid-wrap">
      <div class="block-wrap" data-rowspan="1" data-colspan="1">
        <div class="block text-only light-aqua white"> text here </div>
      </div>
      <div class="block-wrap" data-rowspan="1" data-colspan="1">
        <div class="block text-only blue white"> text xhere </div>
      </div>
      <div class="block-wrap" data-rowspan="2" data-colspan="2">
        <div class="block image med-blue white"> xxx </div>
      </div>
      <div class="block-wrap" data-rowspan="1" data-colspan="1">
        <div class="block text-only dark-blue white"> text here </div>
      </div>
      <div class="block-wrap" data-rowspan="1" data-colspan="1">
        <div class="block text-only light-blue white"> text here </div>
      </div>
      <div class="block-wrap" data-rowspan="1" data-colspan="1">
        <div class="block text-only light-aqua white"> text here </div>
      </div>
      <div class="block-wrap" data-rowspan="1" data-colspan="1">
        <div class="block text-only"> text here </div>
      </div>
</div>

我认为如果不尝试单独在两个容器上启动Masonry，您的JavaScript仍然可以使用此更改。

在旁注中，除了样式之外，还有其他任何理由使用数据属性吗？ ~~如果没有，那么~~即使您是应该使用类，因为所有浏览器都不支持数据属性。

jquery砌体布局问题

2 个答案: