0

我使用 Masonry 来制作基于流体瓷砖的网格。在这个网格中，我想要没有排水沟，我想要 3 种不同类型的瓷砖：1x1、2x1、2x2 和 1x2。我有这个工作，但我唯一的问题是砌体似乎开始时在瓷砖之间有一些排水沟。如果我稍微调整一下窗口的大小，这些图块就会得到合适的大小并且没有装订线。

这是我的html：

<div class="masonry js-masonry"  data-masonry-options='{"itemSelector": ".item" }'>
  <div class="grid-sizer"></div>
  <div class="item w1" style="background:url('images/img-1.png'); background-size:100% 100%;" ></div>
  <div class="item w1" style="background:url('images/img-1.png'); background-size:100% 100%;"></div>
  <div class="item w2" style="background:url('images/img-2.png'); background-size:100% 100%;"></div>
  <div class="item w1" style="background:url('images/img-1.png'); background-size:100% 100%;"></div>
  <div class="item w1" style="background:url('images/img-1.png'); background-size:100% 100%;"></div>
  <div class="item w2" style="background:url('images/img-2.png'); background-size:100% 100%;"></div>
  <div class="item w2" style="background:url('images/img-2.png'); background-size:100% 100%;"></div>
  <div class="item w2 h3" style="background:url('images/img-3.png'); background-size:100% 100%;"></div>
  <div class="item w1" style="background:url('images/img-1.png'); background-size:100% 100%;"></div>
  <div class="item w2" style="background:url('images/img-2.png'); background-size:100% 100%;"></div>
  <div class="item w2 h3" style="background:url('images/img-3.png'); background-size:100% 100%;"></div>
  <div class="item w1" style="background:url('images/img-1.png'); background-size:100% 100%;"></div>
</div>

我的 CSS

.masonry {
  background: #EEE;
  width: 100%;
}
.masonry .item,
.masonry .grid-sizer {
  width:  25%;
}
.masonry .item,
.masonry .grid-sizer {
  height: 60px;
  float: left;
}       
.item { width:  25%; }
.item.w2 { width:  50%;}

还有一些用于调整窗口大小并获得适当高度的 Javascript：

var tileHeight = 0;

$(function(){
    $(window).resize(function() {
        onResize();
    });
    onResize();
});


function onResize(){
    tileHeight = $(".grid-sizer").width();
    $(".item").each(function(){
        var $this = $(this);
        if($this.hasClass("h2")){
            $this.height(tileHeight*2);
        } else if($this.hasClass("h3")){
            $this.height(tileHeight*3);
        } else{
            $this.height(tileHeight);
        } 
    });
};

这是一个屏幕截图：

页面加载时的装订线

在我调整大小后，它看起来应该是这样的：

在此处输入图像描述

4

1 回答 1

1

我有一个类似的问题，两件事似乎解决了它。首先将图片尺寸高度和宽度添加到网格中图片的每个周围 div。第二次调用 masonry.reload() 或 masonry.appended 告诉 masonry 它已经改变了。您也可以尝试 packagery 或 wookmark jquery 插件。还有很多不那么出名的。检查我的答案：砌体图像重叠问题。

于 2013-11-01T09:05:09.910 回答