主页 / 问题 / 1232464
Accepted
Мне без сахара
Asked:2022-01-17 15:01:38 +0800 CST2022-01-17 15:01:38 +0800 CST

像在 Pinterest 上一样对想法进行排序

  • 772

如何在网格的帮助下或没有网格的情况下做到这一点，因为在 pinterest 页面上，我的意思是在那里对图片进行排序（下图），是否有可能没有框架 在此处输入图像描述

javascript

2 个回答

  1. Best Answer

    最简单的选项是使用column-count:指定列数的属性。在下面的示例中，我们将图片排列成三列column-count: 3;

    .items {
  column-count: 3;
}

.item {
  display: inline-block;
  margin-top: 10px;
}

.item img {
  display: block;
  width: 100%;
}
    <div class="items">
  <div class="item"><img src="https://images.pexels.com/photos/1257110/pexels-photo-1257110.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
  <div class="item"><img src="https://images.pexels.com/photos/1054974/pexels-photo-1054974.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
  <div class="item"><img src="https://images.pexels.com/photos/2253879/pexels-photo-2253879.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
  <div class="item"><img src="https://images.pexels.com/photos/1257099/pexels-photo-1257099.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
  <div class="item"><img src="https://images.pexels.com/photos/1128318/pexels-photo-1128318.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
  <div class="item"><img src="https://images.pexels.com/photos/532508/pexels-photo-532508.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
  <div class="item"><img src="https://images.pexels.com/photos/834508/pexels-photo-834508.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
  <div class="item"><img src="https://images.pexels.com/photos/50692/brothers-family-siblings-boys-50692.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
</div>

    • 2

  2. 使用 CSS Flexbox 布局系统的变体。在下面的示例中，我们将图片排列成三列。

    可以使用 CSS Grid 构建相同的网格。但是，在我看来，将 Masonry 库用于这些目的是最有效的。

    .items {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vw;
  font-size: 0;
}

.item {
  width: calc(33.3% - 10px);
  margin: 5px;
}

.item img {
  display: block;
  width: 100%;
  opacity: 0.5;
  transition: .5s opacity;
}

.item:hover img {
  opacity: 1;
}

@supports not (flex-wrap: wrap) {
  .item {
    display: block;
  }
  .item img {
    display: inline-block;
    vertical-align: top;
  }
}
    <div class="items">
  <div class="item"><img src="https://images.pexels.com/photos/1257110/pexels-photo-1257110.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
  <div class="item"><img src="https://images.pexels.com/photos/1054974/pexels-photo-1054974.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
  <div class="item"><img src="https://images.pexels.com/photos/2253879/pexels-photo-2253879.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
  <div class="item"><img src="https://images.pexels.com/photos/1257099/pexels-photo-1257099.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
  <div class="item"><img src="https://images.pexels.com/photos/1128318/pexels-photo-1128318.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
  <div class="item"><img src="https://images.pexels.com/photos/532508/pexels-photo-532508.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
  <div class="item"><img src="https://images.pexels.com/photos/834508/pexels-photo-834508.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
  <div class="item"><img src="https://images.pexels.com/photos/50692/brothers-family-siblings-boys-50692.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
</div>

    • 0

相关问题