我应该如何构建一张仅限于照片的投资组合？

Question

我喜欢这些如下组合：

http://www.ericryananderson.com/

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

我想创建一个网站，照片连接在一起的拼贴画的同一个概念。但我不确定解决这个问题的最佳方法，我只是使用盒子大小和浮点数？或者引导使这个项目更容易？感谢您的帮助！

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

Answer 1

我不认为用纯CSS实现这一点是可能的，如果我错了，请纠正我。

对于那种我通常使用同位素（http://isotope.metafizzy.co/）的东西，它有一个名为“石工”的设置，绝对定位像这样的图像。你在那里连接的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> 

这不会是很适合移动设备，虽然。而且你必须在生成你的列的代码中进行排序/排序。例如遍历所有想要显示的条目，将它们保存在一个数组中，将数组拆分成多个较小的数组，并将它们的内容分别放在一个列中。