javascript - 同位素等高行

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

我尝试了最小高度和高度的几项操作，例如自动，继承，100％，100vh，...

这是我现在的项目，具有2x2网格块布局：
它具有4个50vh和50vh的块...
当块的内容大于块（50vh）时，块将增长，第二个块应随之增长。

$('.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/[email protected]/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>

提前致谢

亲切的问候

最佳答案

我编辑了最后一个答案。查看是否添加以下行可以解决您的问题。

.grid-item {
  bottom: 0;
}

$('.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;
}

.grid-item {
  bottom: 0;
}

@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/[email protected]/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>

关于javascript - 同位素等高行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52122678/