javascript - 同位素等高行

Question

如何使同位素行具有相同的高度？ 下一列从正确的高度开始，但背景没有填满整个 block 。

我尝试了几种使用最小高度和高度的方法，例如 auto、inherit、100%、100vh、...

这是我现在的元素，具有 2x2 网格 block 布局: 它具有 4 个 block ，分别为 50vh 和 50vh... 当内容大于 block (50vh) 时 block 增长，第二个 block 应该随之增长。

$('.grid').isotope({
  // set itemSelector so .grid-sizer is not used in layout
  itemSelector: '.grid-item',
  percentPosition: true,
  layoutMode: 'fitRows',
  masonry: {
    // use element for option
    columnWidth: '.grid-sizer'
  }
});

/*
var maxHeight = 0;

$(".grid-item").each(function(){
   var thisH = $(this).height();
   if (thisH > maxHeight) { maxHeight = thisH; }
});

$(".grid-item").height(maxHeight);
*/

.grid-item {
  background: #0ba;
}

.grid-item:nth-child(2n+2) {
  background: #555;
}

.grid-item:nth-child(3n+3) {
  background: #e64;
}

.grid-item:nth-child(4n+4) {
  background: #00f;
}

.grid-item:nth-child(3n+5) {
  background: #9f5;
}

.grid {
  width: 100vw;
}

.grid-sizer,
.grid-item {
  width: 50vw;
}
.grid-item {
  min-height: 100vh;
}

@media only screen and (min-width: 1280px) {
  .grid-sizer,
  .grid-item {
    width: 50vw;
  }
  .grid-item {
    min-height: 50vh;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://npmcdn.com/isotope-layout@3.0/dist/isotope.pkgd.min.js"></script>
<h1>Layout</h1>
<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item" style="font-size:40px;">Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</div>
  <div class="grid-item">gdfgdf</div>
  <div class="grid-item">gfdg</div>
  <div class="grid-item">gfg</div>
</div>

提前致谢

亲切的问候

Answer 1

我找到了 this commit : equal_height_fit-rows.js

1. 修正拼写错误并在 第 40 行 添加 ) [编辑] (minified file fixed here) [/编辑]
2. 在 isotope.pkgd.min.js 之后加载它
3. 然后添加 equalHeight:true 作为 fitRows 选项:

var iso = new Isotope( listElem, {
          itemSelector: 'li',
          layoutMode: 'fitRows',
          fitRows: {
            equalheight: true
           }
        });