jQuery Масонство макета с двумя конкретными размерами

Question

Я создаю макет с масонством, который имеет только два размера: маленький и большой. Тем не менее, я создал случайный выбор, и они не складываются правильно.

Вот мой HTML & JS:

<div class="container"> 
    <div class="featured"></div> 
    <div class="featured small"></div> 
    <div class="featured small"></div> 
    <div class="featured"></div> 
    <div class="featured small"></div> 
    <div class="featured small"></div> 
    <div class="featured"></div> 
    <div class="featured small"></div> 
    <div class="featured small"></div> 
    <div class="featured"></div> 
    <div class="featured small"></div> 
    <div class="featured small"></div> 
    <div class="featured small"></div> 
    <div class="featured small"></div> 
</div> 

<script> 
docReady(function() { 
var $container = $('.container'); 
    $container.imagesLoaded(function(){ 
     $container.masonry({ 
     columnWidth: 225 
     itemSelector: '.featured' 
    isFitWidth: true 
      }); 
      }); 
}); 
</script> 

Вот мой CSS:

.container { 
    background: #EEE; 
    width:960px; 
    margin-bottom:20px; 
} 

.featured { 
    width:440px; 
    height:440px; 
    margin:10px; 
    float:left; 
    background:#09F; 
} 

.featured.small{ 
    width:210px; 
    height:210px; 
} 

Я хотел бы, если бы это был тот же самый эффект, как этот сайт: Zappos Tweet Wall

Но мне трудно понять, как работает эта библиотека.

Answer 1

Looks fine to me

var $container = $('#container'); 
$container.masonry({ 
    columnWidth: 110, 
    itemSelector: '.featured' 
}); 

Я думаю, что это из-за вашей imagesLoaded функции. (Также может быть из-за вашего docReady)