Изотопные линии равной высоты - PullRequest
Новая
       9

Изотопные линии равной высоты

0 голосов
/ 01 сентября 2018

Как сделать так, чтобы строки изотопов имели одинаковую высоту? Следующий столбец начинается с правильной высоты, но фон не заполняет весь блок.

Я пробовал несколько вещей с минимальной высотой и высотой, таких как авто, наследовать, 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/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>

Заранее спасибо

С уважением

1 Ответ

0 голосов
/ 01 сентября 2018

Я отредактировал свой последний ответ. Посмотрите, решит ли ваша проблема добавление следующих строк. 

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