我应该如何构建仅图片的投资组合？ [关闭]

Question

我喜欢以下这些作品集：

http://www.ericryananderson.com/

http://jeremycowart.com/portfolio/featured/

我想创建一个具有相同概念的网站，即将照片拼贴连接在一起。但我不确定解决这个问题的最佳方法，我会使用 box-sizing 和 floats 吗？或者引导程序会使这个项目更容易吗？感谢您的帮助！

编辑：我被告知为了做到这一点，photoshop 将是最好的方法，但如果可能的话，我想通过编程来完成。

Answer 1

我认为纯 CSS 无法实现这一点，如果我错了，请纠正我。

对于那种我通常使用同位素 (http://isotope.metafizzy.co/) 的东西，它有一个名为“masonry”的设置，可以绝对定位这样的图像。您在那里链接的http://jeremycowart.com/ 也使用同位素。

如果你想严格使用 CSS，我能想到的就是设置四列，然后将图像堆叠在里面。有点像https://jsfiddle.net/x74rbraa/

<div class="container">

<div class="col">
  <div class="box box--portrait">
  </div>
  <div class="box box--portrait">
  </div>
  <div class="box box--landscape">
  </div>
</div>
<div class="col">
  <div class="box box--landscape">
  </div>
  <div class="box box--portrait">
  </div>
  <div class="box box--landscape">
  </div>
</div>

不过，这对移动设备不太友好。而且您必须在生成列的代码中进行排序/排序。例如，遍历您要显示的所有条目，将它们保存在一个数组中，将数组拆分为多个较小的数组，并将它们的内容分别放在一个列中。