Question

我正在使用Masonry创建一个布局，它只有两种尺寸可供选择：小尺寸和大尺寸。但是，我创建了一个随机选择，它们没有正确堆叠在一起。

这是我的HTML＆amp; 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）

jQuery Masonry布局有两种特定尺寸

1 个答案: