Question

我遇到了与砌体有关的问题，如果我需要一个元素为100％宽度而其余元素为50％宽度，则布局不再使我的元素彼此相邻。我希望这些项目能够像没有100％-width元素时那样并排显示。

这是一个js小提琴：https://jsfiddle.net/ubmf47s4/2/

    <div id="boxes" class="masonry clearfix">
    <div class="box box-fw" style="background: cyan;">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box" style="background: magenta;">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box" style="background: yellow;">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box" style="background: grey;">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
</div>

.box{
    width: 50%;
    box-sizing:border-box;
}

.box-fw{
   width:100%
}

    $(function(){
    var container = $('#boxes');

    container.imagesLoaded(function(){  
        //console.log( "Images loaded!" );
        container.masonry({
           itemSelector: '.box',
            isAnimated: true
        });
    });
});

Answer 1

砌体需要columnWidth来确定列的宽度，以便布置内容，可以是直接像素值，也可以是要测量的元素的选择器。由于代码中未指定columnWidth，因此Masonry默认测量砌体容器中的第一个元素以确定列宽。由于您的第一个元素是宽度为100％的元素，因此Masonry测量它并将列宽设置为100％，这就是为什么50％宽度元素不再并排显示（您的整个砌体布局实际上是单栏）。

有关此行为的更多信息in the Masonry docs for columnWidth。

解决此问题的一种方法是指定砌体可以测量的元素以确定您的列宽 - 在这种情况下，我使用了具有类column-sizer的元素，我已经调整了大小使用CSS达到50％。然后，砌体测量此元素以确定布局的列大小。我从David Desandro's fluid columnWidth CodePen example借用了这项技术。

结果屏幕截图：

现场演示：

＆＃13;

$(function() {
  var container = $('#boxes');

  container.imagesLoaded(function() {
    //console.log( "Images loaded!" );
    container.masonry({
      itemSelector: '.box',
      columnWidth: '.column-sizer',
      isAnimated: true
    });
  });
});

＆＃13;

html,
body {
  margin: 0;
}
.box,
.column-sizer {
  width: 50%;
  box-sizing: border-box;
}
.box-fw {
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/masonry-layout@4.0.0/dist/masonry.pkgd.min.js"></script>
<script src="https://npmcdn.com/imagesloaded@4.1.0/imagesloaded.pkgd.min.js"></script>

<div id="boxes" class="masonry clearfix">
  <div class="column-sizer"></div>
  <div class="box box-fw" style="background: cyan;">
    <div class="inner">
      <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd</p>
    </div>
  </div>
  <div class="box" style="background: magenta;">
    <div class="inner">
      <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd</p>
    </div>
  </div>
  <div class="box" style="background: yellow;">
    <div class="inner">
      <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd</p>
    </div>
  </div>
  <div class="box" style="background: grey;">
    <div class="inner">
      <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd</p>
    </div>
  </div>
</div>

＆＃13;

JSFiddle版本：https://jsfiddle.net/x9mf2c6x/

带全宽物品的砌体

1 个答案: