Question

图像的加载顺序如下：

1 | 3 | 5 | 7

2 | 4 | 6 | 8

但是我正在尝试找到一种加载图像的方法，如下所示：

1 | 2 | 3 | 4

5 | 6 | 7 | 8

取消注释码本中的最后四个列表项以查看其操作。

这可以仅使用CSS完成吗，还是需要一些jQuery插件？如果有一个可以解决此问题的jquery插件，我要确保图像画廊的行为仍然与Codepen中的行为完全相同，没有任何花哨的动画或在调整窗口大小时重新排序。

https://codepen.io/pkroupoderov/pen/BMRMVm?editors=1100

HTML：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./temp.css">
  </head>
  <body>
    <div class="photo-container">
      <ul>
        <li>
          <img src="https://farm8.staticflickr.com/7909/33089338628_052e9e2149_z.jpg" alt="">
        </li>
        <li>
          <img src="https://farm8.staticflickr.com/7894/46240285474_81642cbd37_z.jpg" alt="">
        </li>
        <li>
          <img src="https://farm8.staticflickr.com/7840/32023738937_17d3cec52f_z.jpg" alt="">
        </li>
        <li>
          <img src="https://farm8.staticflickr.com/7815/33089272548_fbd18ac39f_z.jpg" alt="">
        </li>
<!--    <li>
          <img src="https://farm5.staticflickr.com/4840/40000181463_6eab94e877_z.jpg" alt="">
        </li>
        <li>
          <img src="https://farm8.staticflickr.com/7906/46912640552_4a7c36da63_z.jpg" alt="">
        </li>
        <li>
          <img src="https://farm5.staticflickr.com/4897/46912634852_93440c416a_z.jpg" alt="">
        </li>
        <li>
          <img src="https://farm5.staticflickr.com/4832/46964511231_6da8ef5ed0_z.jpg" alt="">
        </li> -->
      </ul>
    </div>
  </body>
</html>

CSS：

ul {
    list-style-type: none;
    padding-left: 0;
}

.photo-container ul li {
    margin-bottom: 4px;
}

.photo-container ul img {
    width: 100%;
}

/* Responsive image layput configuration*/
.photo-container ul {
    line-height: 0;
    column-gap: 4px !important;
    column-count: 4;
}

@media (max-width: 1000px) {
    .photo-container ul {
      column-count: 4;
    }
  }

@media (max-width: 800px) {
    .photo-container ul {
      column-count: 3;
    }
  }
}

如何使图像从左到右而不是从上到下加载？

0 个答案: