Блог

Главная - Вопросы по программированию - 50% ширина элементов кладки

50% ширина элементов кладки

#javascript #jquery-masonry

#javascript #jquery-masonry

Вопрос:

В настоящее время я пытаюсь применить макет кладки к своему сайту, используя Masonry.desanto

Проблема, если мне нужно, чтобы размер первых двух блоков составлял 50% от общей родительской ширины, но я не могу сделать это с помощью этой библиотеки. Второй элемент ВСЕГДА находится ниже первого. неважно, использую ли я какой-нибудь css, например width: calc (50% — 100px). Смотрите пример здесь:https://codepen.io/josebelisario/pen/JjXvPKL

 // external js: masonry.pkgd.js

$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true,
  horizontalOrder: true,
  gutter: 15
});  
 * { box-sizing: border-box; }

body { font-family: sans-serif; }

/* ---- grid ---- */

.grid {
  background: #EEE;
  max-width: 1200px;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-sizer,
.grid-item {
  width: calc(33.33% - 30px);
}

.grid-item {
  color: white;
  height: 120px;
  float: left;
  background: #D26;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;
  margin-bottom: 15px;
}

.grid-item--height2 { height: 200px; }
.grid-item--height3 { height: 260px; }
.grid-item--height4 { height: 360px; }

.item-40 { width: calc(40% - 30px); }
.item-50 { width: calc(50% - 30px); }  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://masonry.desandro.com/masonry.pkgd.js"></script>
<h1>Masonry - fluid columnWidth</h1>

<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item item-50">1</div>
  <div class="grid-item item-50">2</div>
  <div class="grid-item grid-item--height2">3</div>
  <div class="grid-item grid-item--height3">4</div>
  <div class="grid-item grid-item--height2">5</div>
  <div class="grid-item item-40">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item grid-item--height2">9</div>
  <div class="grid-item item-40 grid-item--height3">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item grid-item--height2">12</div>
  <div class="grid-item">13</div>
  <div class="grid-item item-50 grid-item--height2">14</div>
  <div class="grid-item item-40">15</div>
  <div class="grid-item">16</div>
  <div class="grid-item grid-item--height2">17</div>
  <div class="grid-item">18</div>
  <div class="grid-item">19</div>
  <div class="grid-item grid-item--height3">20</div>
  <div class="grid-item grid-item--height2">21</div>
  <div class="grid-item">22</div>
  <div class="grid-item">23</div>
  <div class="grid-item grid-item--height2">24</div>
  <div class="grid-item">25</div>
</div>

Ответ №1:

Для вашего конкретного примера вам нужно придумать наименьший общий знаменатель (например, дроби) для вашего .grid-sizer класса. (В этом случае ваша сетка выглядит так, как будто она должна состоять из 6 столбцов, из которых 50%-ные ячейки занимают 3/6, а обычные .grit-item ячейки занимают 2/6. Чтобы быть в безопасности при вычислении ширины в сетках masonry, я также никогда не округляю %, поэтому ваша .grid-sizer ширина, вероятно, должна быть следующей width:calc(16.66% - 15px)

Следует также отметить еще одну вещь … если вы хотите, чтобы вертикальное и горизонтальное пространство желоба было ровным, вычтите одно и то же значение в пикселях из вашего уравнения (вместо 33.33% - 30px попытки 33.33% - 15px . Это придаст ему истинный вид сетки кладки.

Я предоставил обновленный CSS для вашего примера ниже. Скопируйте и вставьте это в свой CodePen, и вы должны увидеть значительное улучшение.

 * { box-sizing: border-box; }

body { font-family: sans-serif; }

/* ---- grid ---- */

.grid {
  background: #EEE;
  max-width: 1200px;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-sizer{
  width: calc(16.66% - 15px);
}
.grid-item {
  width: calc(33.33% - 15px);
}

.grid-item {
  color: white;
  height: 120px;
  float: left;
  background: #D26;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;
  margin-bottom: 15px;
}

.grid-item--height2 { height: 200px; }
.grid-item--height3 { height: 260px; }
.grid-item--height4 { height: 360px; }

.item-40 { width: calc(40% - 15px); }
.item-50 { width: calc(50% - 15px); }

Дайте мне знать, сработал ли этот ответ для вас! 🙂

Комментарии:

1. Пометил его как принятый, потому что он решает то, о чем я спрашивал, но для моего случая я закончил переписыванием более простого скрипта masonry, который ведет себя именно так, как я хочу. Спасибо

2. Рад, что у вас все получилось так, как вам нужно! 🙂