Question

我希望在一个画廊工作，我必须在每个专辑类别容器中显示专辑类别及相册图标的快照。

下图是针对每个Category容器内的图像的不同布局。这与Facebook类似。

我需要最多显示四个专辑图标/图像＆amp;每个相册类别容器中至少有3个图像。我一直在寻找类似的例子，但在互联网上没有被罚款。

我在codepen上设置了一个示例。对于每张专辑，我必须显示默认图像，最重要的是我必须创建网格。

但是图像网格必须是最小3或4个图像的拼贴风格网格，如果我们显示3个图像，则左侧或右侧的图像显示为100in高度占据容器高度，其他两个图像将是正常高度。

我尝试了一些事情，但我无法做到。

<ul class="cbp-rfgrid">
  <!--item-->

  <li>
    <a href="albums/6/crisis-relief">
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg">
      <div>
        <h3 class="album-causes-list-h3">Album One </h3>

      </div>
    </a>
  </li>

  <li>
    <a>
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg">
      <div>
        <h3 class="album-causes-list-h3">Album Two </h3>

      </div>
    </a>
  </li>

  <li>
    <a href="albums/5/health">
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg">
      <div>
        <h3 class="album-causes-list-h3">Album Three </h3>

      </div>
    </a>
  </li>

  <li>
    <a>
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg">
      <div>
        <h3 class="album-causes-list-h3">Album Four </h3>

      </div>
    </a>
  </li>

  <li>
    <a>
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg">
      <div style="position: absolute; height: auto; display: block; background-color: rgba(0, 0, 0, 0);">
        <img style="width: 50%; height: 50%; display: block ! important; float: left ! important;" src="http://theologymix.com/wp-content/uploads/2017/01/mountains-600x400.jpg">
        <img style="width: 50%; height: 50%; display: block ! important; float: left ! important;" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT1PBMolDgRsyDXiehq5Fth6oECQZMCTQn_5cp8wL8sUPlOsjPM">
        <div style="background-color: rgba(0, 0, 0, 0.1); "></div>

      </div>

      <div>
        <h3 class="album-causes-list-h3">Album five  </h3>


      </div>
    </a>
  </li>

  <li>
    <a>
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg">
      <div style="position: absolute; background-color: rgba(0, 0, 0, 0.0); height: auto; display: block;">
        <img style="width: 50%; height: 50%; display: block ! important; float: left ! important;" src="http://fm.cnbc.com/applications/cnbc.com/resources/img/editorial/2015/03/17/102512937-498619551.600x400.jpg?v=1426619700">
        <img style="width: 50%; height: 50%; display: block ! important; float: left ! important;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRx4DXyobeDy3Sw0n9Cm_cS6PGqPb-ivrT1DD4H9HReZRrOJQEk">
        <img style="width: 50%; height: 50%; display: block ! important; float: left ! important;" src="http://joannagraham.github.io/img/pictures/8.jpg">
        <img style="width: 50%; height: 50%; display: block ! important; float: left ! important;" src="http://fm.cnbc.com/applications/cnbc.com/resources/img/editorial/2016/12/08/104155736-5186314506_6882142ee7_o.600x400.jpg?v=1481234247">
        <div style="background-color: rgba(0, 0, 0, 0.2); "></div>
      </div>

      <div>
        <h3 class="album-causes-list-h3">Album Six  </h3>

      </div>
    </a>
  </li>

  <li>
    <a>
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg">
      <div>
        <h3 class="album-causes-list-h3">Album Seven</h3>
        <span class="cause-count">Albums (0)</span>
      </div>
    </a>
  </li>

  <li>
    <a>
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg">
      <div>
        <h3 class="album-causes-list-h3">Album EIGHT </h3>

      </div>
    </a>
  </li>


  <!--item-->
</ul>

Answer 1

如何简单地将图像URL随机分配（可能是通过for循环）到每个图像标记（在div / li中），然后让css处理这些图像的设计方式

Facebook喜欢图片库风格

1 个答案: