jquery masonry layout issues

Question

I'm trying to setup a jquery masonry layout, and having some issues with the layout. I've tried several different ways but I can't get my boxes to sit properly.

This is the site I'm working on:

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

I need the boxes to sit like this (but I can't seem to figure it out):

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

This is the 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>

This is the 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%}

This is the jQuery:

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

Any help would be greatly appreciated!!

Answer 1

Ok I figured out the issue, it was getting the first box width, which was larger, when I want the column widths to be the small boxes..

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

Answer 2

I'd recommend splitting your divs into two columns.

<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>

I think that your JavaScript will still work with this change if not try initiating Masonry on both container separately.

On a side note, is there any reason other than styling that you are using data- attributes? If not, then even if you are you should use a class instead as data- attributes are not supported by all browsers.