Question

我正在使用列创建一个照片网格，它可以将所有提供的照片放在一起，而不会在它们之间留下任何空格。

以下是我使用的CSS：

.autofit-photo-grid {
  /* Prevent vertical gaps */
  line-height: 0;
  -webkit-column-count: 3;
  -webkit-column-gap: 0;
  -moz-column-count: 3;
  -moz-column-gap: 0;
  column-count: 3;
  column-gap: 0;
}

.autofit-photo-grid img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  border: 1px solid #777;
  opacity: 0.85;
}

以下是显示问题的示例小提琴：https://jsfiddle.net/es7hLuq4/

如果将鼠标悬停在每张图片上，您会看到他们说＆＃34;照片1＆＃34;，＆＃34;照片2＆＃34;等等，但顺序是这样的

1    4    7
2    5    8
3    6    9

但我希望它像这样

1    2    3
4    5    6
7    8    9

纯CSS可以实现吗？如果没有，是否有任何干净的jQuery解决方案可以提供帮助？我考虑循环遍历每个图像元素并尝试检查它所在的列，但这看起来很混乱（必须在重新调整大小时重复），而且我也不知道如何检查元素当前所在的列。

任何想法如何实现相同的自动调整网格效果，但是从左到右而不是从上到下列出连续的项目？

Answer 1

我已经通过为每个图像使用矩阵索引解决了这个问题。第一个完成的版本有点粗糙，当相邻图像的宽高比完全不同时，有时会重新排序。

我将处理一个更新版本，该版本会考虑图像尺寸，并会在完成后更新答案和小提琴。

我已经将这个JS / jQuery用于示例重新排列函数：

示例fidde：https://jsfiddle.net/069f72ep/

export LC_ALL=en_US.UTF-8
export LANG=en_US.UTF-8

Answer 2

这将以您想要的方式订购商品并维护图片。纵横比。但是图像具有固定的高度，因此它具有与您原来的图像调整大小略有不同的图像大小调整行为。 https://jsfiddle.net/s1bppsjo/2/

.autofit-photo-grid {
    display: flex;
    flex-wrap: wrap;
}

.autofit-photo-grid img {
    height: 200px;
    border: 1px solid #777;
    opacity: 0.85;
}

.autofit-photo-grid img:hover {
    box-shadow: 0 0 12px #333;
    opacity: 1;
}

<div class="autofit-photo-grid">
    <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-300mmf_35-56g_ed_vr/img/sample/sample4_l.jpg" alt="" title="Photo 1" />
    <img src="http://www.bestmotherofthegroomspeeches.com/wp-content/themes/thesis/rotator/sample-1.jpg" alt="" title="Photo 2" />
    <img src="https://www.ricoh.com/r_dc/r/r8/img/sample_10.jpg" alt="" title="Photo 3" />
    <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d600/img/sample01/img_05_l.jpg" alt="" title="Photo 4" />
    <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_nikkor28-300mmf_35-56gd_ed_vr/img/sample/sample2_l.jpg" alt="" title="Photo 5" />
    <img src="http://imgsv.imaging.nikon.com/lineup/lens/singlefocal/normal/af-s_50mmf_18g/img/sample/sample1_l.jpg" alt="" title="Photo 6" />
    <img src="http://www.forkingandcountry.com/sites/g/files/g2000004371/f/sample1.jpg" alt="" title="Photo 7" />
    <img src="http://www.olympusimage.com.sg/content/000010885.jpg" alt="" title="Photo 8" />
    <img src="http://indianapublicmedia.org/arts/files/2012/04/sample-gates-9-940x626.jpg" alt="" title="Photo 9" />
    <img src="https://www.ricoh.com/r_dc/r/r8/img/sample_08.jpg" alt="" title="Photo 10" />
</div>

CSS列（照片网格）从左到右而不是从上到下显示

2 个答案: