Как сделать галлерею изображений как masonry, только горизонтальную и без js?

157
05 апреля 2019, 07:20

Совсем замучился с математикой, уже начинаю просто гадать. ( Нужно сделать галерею, типа masonry или justifeid, только без js, и горизонтальную.

Можно calc, можно flex, можно custom-properties, нельзя grid.

Вот что получилось (на качество кода не обращайте внимание, главное чтобы заработало, потом причешем):

.pic-flex { 
  --var-m: 8; 
  display: flex; 
} 
 
.pic-flex div { 
  --var-r: calc(1vw * var(--var-a) / 150); 
  box-sizing: border-box; 
  background-repeat: no-repeat; 
  background-size: contain; 
  padding-left: calc(var(--var-w) / var(--var-h) * var(--var-r)); 
  height: var(--var-r); 
} 
 
.pic-flex div:not(:last-child) { 
  margin-right: calc(var(--var-m) * 1px); 
  margin-bottom: calc(var(--var-m) * 1px); 
}
<div class="pic-flex" style="--var-a: calc(1200 + 800 + 800 + 2 * var(--var-m));"> 
  <div style="--var-w: 1200; --var-h: 768; background-image: url(//placehold.it/1200x768);"></div> 
  <div style="--var-w: 800; --var-h: 600; background-image: url(//placehold.it/800x600);"></div> 
  <div style="--var-w: 800; --var-h: 600; background-image: url(//placehold.it/800x600);"></div> 
</div> 
<div class="pic-flex" style="--var-a: calc(800 + 1360 + 800 + 2 * var(--var-m));"> 
  <div style="--var-w: 800; --var-h: 600; background-image: url(//placehold.it/800x600);"></div> 
  <div style="--var-w: 1360; --var-h: 768; background-image: url(//placehold.it/1360x768);"></div> 
  <div style="--var-w: 800; --var-h: 600;; background-image: url(//placehold.it/800x600);"></div> 
</div> 
<div class="pic-flex" style="--var-a: calc(1366 + 1920 + 1 * var(--var-m));"> 
  <div style="--var-w: 1366; --var-h: 776;; background-image: url(//placehold.it/1366x776);"></div> 
  <div style="--var-w: 1920; --var-h: 768; background-image: url(//placehold.it/1920x768);"></div> 
</div>

Нужно чтобы было так (аспект у картинок само собой должен быть нормальным):

Answer 1

Черт, кажется получилось! )))

UPDATE: Неуниверсальное решение, с изображениями равной ширины, но разной высоты работает криво.

.pic-flex { 
  --var-m: 8; 
  display: flex; 
} 
 
.pic-flex div { 
  --var-r: 18vw; 
  background-repeat: no-repeat; 
  background-size: cover; 
  background-position: center center; 
  height: var(--var-r); 
  flex-basis: calc(100% / var(--var-a) * var(--var-w)); 
} 
 
.pic-flex div:not(:last-child) { 
  margin-right: calc(var(--var-m) * 1px); 
  margin-bottom: calc(var(--var-m) * 1px); 
} 
 
@media (max-width: 700px) { 
  .pic-flex { 
    --var-m: 4; 
  } 
}
<div class="pic-flex" style="--var-a: calc(1200 + 800 + 800);"> 
  <div style="--var-w: 1200; --var-h: 768; background-image: url(//placehold.it/1200x768);"></div> 
  <div style="--var-w: 800; --var-h: 600; background-image: url(//placehold.it/800x600);"></div> 
  <div style="--var-w: 800; --var-h: 600; background-image: url(//placehold.it/800x600);"></div> 
</div> 
<div class="pic-flex" style="--var-a: calc(800 + 1360 + 800);"> 
  <div style="--var-w: 800; --var-h: 600; background-image: url(//placehold.it/800x600);"></div> 
  <div style="--var-w: 1360; --var-h: 768; background-image: url(//placehold.it/1360x768);"></div> 
  <div style="--var-w: 800; --var-h: 600;; background-image: url(//placehold.it/800x600);"></div> 
</div> 
<div class="pic-flex" style="--var-a: calc(1366 + 1920);"> 
  <div style="--var-w: 1366; --var-h: 776;; background-image: url(//placehold.it/1366x776);"></div> 
  <div style="--var-w: 1920; --var-h: 768; background-image: url(//placehold.it/1920x768);"></div> 
</div>

Answer 2

Придумал еще один вариант, у него и портретными и ландшафтными изображениями все нормально.

.pic-flex { 
  --var-m: 8; 
  display: flex; 
} 
 
.pic-flex div { 
  --var-r: 20vw; 
  background-repeat: no-repeat; 
  background-size: cover; 
  background-position: center center; 
  height: var(--var-r); 
  flex: calc(var(--var-w) / var(--var-h)) 1 auto; 
} 
 
.pic-flex div:not(:last-child) { 
  margin-right: calc(var(--var-m) * 1px); 
  margin-bottom: calc(var(--var-m) * 1px); 
} 
 
@media (max-width: 700px) { 
  .pic-flex { 
    --var-m: 4; 
  } 
}
<div class="pic-flex"> 
  <div style="--var-w: 1200; --var-h: 768; background-image: url(//placehold.it/1200x768);"></div> 
  <div style="--var-w: 800; --var-h: 600; background-image: url(//placehold.it/800x600);"></div> 
  <div style="--var-w: 800; --var-h: 600; background-image: url(//placehold.it/800x600);"></div> 
</div> 
<div class="pic-flex"> 
  <div style="--var-w: 775; --var-h: 477;; background-image: url(//placehold.it/775x477);"></div> 
  <div style="--var-w: 775; --var-h: 1163; background-image: url(//placehold.it/775x1163);"></div> 
  <div style="--var-w: 775; --var-h: 1089; background-image: url(//placehold.it/775x1089);"></div> 
</div> 
<div class="pic-flex"> 
  <div style="--var-w: 1366; --var-h: 776;; background-image: url(//placehold.it/1366x776);"></div> 
  <div style="--var-w: 1920; --var-h: 768; background-image: url(//placehold.it/1920x768);"></div> 
</div>

READ ALSO
Как реализовать паузу в svg анимации
CSS

Как реализовать паузу в svg анимации

Как реализовать задержку в бесконечной анимации?

 158
&ldquo;SyntaxError: super() is only valid in derived class constructors&rdquo;
javascript

“SyntaxError: super() is only valid in derived class constructors”

Не могу понять в чем проблема, подскажите пожалуйста

 158
Не добавлять уникальный объект [дубликат]
javascript

Не добавлять уникальный объект [дубликат]

На данный вопрос уже ответили:

 123
Метод Extend для примесей.Не понятен фрагмент с &ldquo;примешиванием&rdquo; замыканий вызывающие методы примесей
javascript

Метод Extend для примесей.Не понятен фрагмент с “примешиванием” замыканий вызывающие методы примесей

Не пойму кусок кода из статьи про примеси(mixin),там где "примешивают" замыканияКонкретно в строках 1 и 2 не понятно что происходит?Ссылка на статью...

 165