0

标题可能有点误导，但找不到更合适的标题。

我正在集中处理网站上的图像，加载 50 多个图像确实会减慢速度。我想使用 Lazyload 来延迟加载尚未在视口中的图像，但是，布局并没有使这成为可能。

我有一个接一个的图像：<div id="container"><img ..><img ..><img ..></div>我使用 CSS 将它们组织成单独的列。（绝对正确，图像也在 div 中：<div class="pin"><img ..></div>

这是我的CSS。

#container {
  width:100%;
  padding:2px 2px 2px 2px;

  column-count:7;
  -webkit-column-count:7;
  -moz-column-count:7;
  -ms-column-count:7;
  -o-column-count:7;

  column-gap:2px;
  -webkit-column-gap:2px;
  -moz-column-gap:2px;
  -ms-column-gap:2px;
  -o-column-gap:2px;

  column-fill:balance;
  -webkit-column-fill:balance;
  -moz-column-fill:balance;
  -ms-column-fill:balance;
  -o-column-fill:balance;
}

.pin {
  display:block;
  width:100%;
  column-break-inside:avoid;
  -webkit-column-break-inside:avoid;
  -moz-column-break-inside:avoid;
  -ms-column-break-inside:avoid;
  -o-column-break-inside:avoid;
}

我的问题是，这样左上角的图钉是容器内的第一个图钉，下一个图钉在它下面，而不是在它旁边。所以 Lazyload 脚本将首先加载第一个，然后是它下面的一个，而第二列的第一个引脚不会被加载。直到我向下滚动到容器的底部，让所有引脚在第一列加载，然后才开始加载第二列中的引脚。Lazylaod 中有一个选项可以将东西加载到特定容器中，但是，如果我想在我的容器内有 100 个引脚（其中许多引脚将在视口之外），Lazylaod 将同时加载它们...此选项专为较小的容器而设计。

我的问题是：（第一）有没有办法用 CSS 组织我的引脚，以便第二个引脚不在第一列的第一个下面，但它是第二列的最顶部？如果没有，是否有人对如何解决这个困境有任何建议？

（主要是，我首先对概念性想法感兴趣，而不是其他一些现成的网格脚本。只有在没有其他方法的情况下，我才会使用另一个脚本，因为那样的话我有很多事情要做......）

谢谢！

4

0 回答 0