仅使用CSS而不使用javascript的pinterest之类的网格布局 [英] Grid layout like pinterest using css only and without javascript

问题描述

我需要像Pinterest这样的网格布局.我将如何实现这种布局?

I need a grid layout like Pinterest. How am I going to achieve such layout?

我尝试使用flex，但每个元素都有空间，我想要像Pinterest中那样的网格布局.

I tried using flex but each element has space and I want the grid layout like in Pinterest.

<style>
    .flex{
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .flex-item{
        width: 20%;
        background: #dddddd;
    }
</style>

<div class="flex">
    <div class="flex-item">content.....</div>
    <div class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit..</div>
    <div class="flex-item">Lorem ipsum dolor sit..</div>
    <div class="flex-item">Lorem ipsum dolor sit amet consectetur..</div>
    <div class="flex-item">Lorem ipsum..</div>
</div>

我真的希望布局像pinterest一样，我不确定flex是否是实现此目的的实用方法.任何解决方案或建议将不胜感激.预先感谢！

I really want the layout to be like pinterest I'm not sure if the flex is the practical way to achieve this. Any solution or advice will be much appreciated. Thanks in advance!

推荐答案

这称为砌体布局，要获得所需的效果，最好使用JS.

下面的JavaScript函数计算所有 砖，然后向砌体容器平均提供 高度(根据砌体檐槽和提供的列数) 用于不同的屏幕断点.

Below JavaScript function calculates the collective height of all the bricks, and then to provide the masonry container an average of that height based on the masonry gutter, and the number of columns provided for different screen breakpoints.

为了在砌体中添加精美的预加载文本，您可以考虑使用以下类似内容.除了向我们的砌体容器中添加一个相邻的HTML元素外，什么都没有，我们必须在所有图像完成加载后立即将其隐藏.我们希望在某些事件上显示切换.

In order to add fancy preloading text to the masonry, you may consider using something like below. It’s about nothing but adding an adjacent HTML element to our masonry container, which we have to hide as soon as the all the images finish loading. A toggle in display on certain events is what we want here.

来源: https://w3bits.com/flexbox-masonry/

function masonry(grid, gridCell, gridGutter, dGridCol, tGridCol, mGridCol) {
  var g = document.querySelector(grid),
    gc = document.querySelectorAll(gridCell),
    gcLength = gc.length,
    gHeight = 0,
    i;

  for (i = 0; i < gcLength; ++i) {
    gHeight += gc[i].offsetHeight + parseInt(gridGutter);
  }

  if (window.screen.width >= 1024)
    g.style.height = gHeight / dGridCol + gHeight / (gcLength + 1) + "px";
  else if (window.screen.width < 1024 && window.screen.width >= 768)
    g.style.height = gHeight / tGridCol + gHeight / (gcLength + 1) + "px";
  else
    g.style.height = gHeight / mGridCol + gHeight / (gcLength + 1) + "px";
}

var masonryGrid = document.querySelector('.masonry');
masonryGrid.insertAdjacentHTML("afterend", "<div class='masonry-preloader'>Loading...</div>");
var masonryPreloader = document.querySelector('.masonry-preloader');

["resize", "load"].forEach(function(event) {
  // Adding little preloader information
  masonryGrid.style.display = "none";
  window.addEventListener(event, function() {
    imagesLoaded(document.querySelector('.masonry'), function() {
      masonryGrid.style.display = "flex";
      masonryPreloader.style.display = "none";
      // A masonry grid with 8px gutter, with 3 columns on desktop, 2 on tablet, and 1 column on mobile devices.
      masonry(".masonry", ".masonry-brick", 8, 3, 2, 1);
      console.log("Loaded");
    });
  }, false);
});

.wrapper {
  margin: 2em auto;
  max-width: 970px;
}

.ta-center {
  text-align: center;
}

img {
  vertical-align: middle;
  max-width: 100%;
}

.masonry {
  display: flex;
  flex-flow: column wrap;
  margin-left: -8px;
  /* Adjustment for the gutter */
  counter-reset: brick;
  width: 100%;
}

.masonry-brick {
  overflow: hidden;
  border-radius: 5px;
  margin: 0 0 8px 8px;
  /* Some Gutter */
  background-color: #eee;
  position: relative;
}

.masonry-brick:after {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5000;
  color: white;
  transform: translate(-50%, -50%);
  counter-increment: brick;
  content: counter(brick);
  transition: font-size .25s, opacity .25s ease-in-out;
  font-weight: 700;
  opacity: .5;
  font-size: 1.25em;
}

.masonry-brick:hover:after {
  font-size: 2.25em;
  opacity: 1;
}

.masonry-brick-caption {
  padding: 1.5em;
  text-align: center;
}

.masonry-preloader {
  font-size: 2em;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: .5;
  height: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (min-width: 1024px) {
  /* Vertical masonry bricks on desktop-sized screen */
  .masonry-brick {
    width: 33.33333%;
  }
}

@media only screen and (max-width: 1023px) and (min-width: 768px) {
  /* Vertical masonry bricks on tablet-sized screen */
  .masonry-brick {
    width: 50%;
  }
}

.masonry-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  filter: brightness(50%);
}

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<div class="masonry">
  <figure class="masonry-brick"><img src="https://unsplash.it/700/800?image=1" alt="Masonry Brick #1" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/600?image=2" alt="Masonry Brick #2" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/400?image=3" alt="Masonry Brick #3" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/500?image=4" alt="Masonry Brick #4" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/700?image=5" alt="Masonry Brick #5" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/300?image=6" alt="Masonry Brick #6" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/500?image=7" alt="Masonry Brick #7" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/650?image=8" alt="Masonry Brick #8" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/350?image=9" alt="Masonry Brick #9" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/420?image=10" alt="Masonry Brick #10" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/300?image=11" alt="Masonry Brick #11" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/500?image=12" alt="Masonry Brick #12" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/550?image=13" alt="Masonry Brick #13" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/900?image=14" alt="Masonry Brick #14" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/800?image=15" alt="Masonry Brick #15" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/400?image=16" alt="Masonry Brick #16" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/500?image=17" alt="Masonry Brick #17" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/650?image=18" alt="Masonry Brick #18" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/550?image=19" alt="Masonry Brick #19" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/440?image=20" alt="Masonry Brick #20" class="masonry-img"></figure>
</div>

这篇关于仅使用CSS而不使用javascript的pinterest之类的网格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！