Проблемы с раскладкой кладки jquery

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

Ok я понял вопрос, он получал первую ширину коробки, которая была больше, когда я хочу, чтобы ширина столбцов быть небольшими коробками ..

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

Answer 2

Я бы рекомендовал разделить ваши divs на две колонки.

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

Я думаю, что ваш JavaScript будет по-прежнему работать с этим изменением, если не попытаться запустить масонство на обоих контейнерах отдельно.

На боковой ноте есть ли какие-либо причины, кроме стиля, которые вы используете атрибуты данных? Если нет, то , даже если вы, вы должны использовать класс, а атрибуты данных не поддерживаются всеми браузерами.