具有全宽项目的砌体

Question

我在使用 Masonry 时遇到问题，如果我需要一个元素为 100% 宽度而其余元素为 50% 宽度，则布局不再将我的元素彼此相邻。我想要的是让项目像没有 100% 宽度元素时那样并排显示。

这是一个 js fiddle: 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

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

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

解决此问题的一种方法是指定 Masonry 可以测量的元素以确定您的列宽 - 在这种情况下，我使用了带有 class column-sizer 的元素，我'使用 CSS 将大小调整为 50%。然后 Masonry 测量此元素以确定布局的列大小。我从 David Desandro's fluid columnWidth CodePen example.

那里借用了技巧

结果截图：

工作现场演示：

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

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

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

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

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

具有全宽项目的砌体

Masonry with full-width items

javascript

css

masonry