以非网格方式定位图像

Question

我正在尝试按照下面的图片以某种 "thought cloud" 效果在网页上定位图片。这些最终将成为站点上其他页面的链接并用作导航。

到目前为止，我所拥有的是一个上下颠倒的居中图像金字塔，如下所示。它们看起来不错，但我希望它们在允许的区域内有更多的自由漂浮感，同时保持对分辨率的响应。

非常感谢任何关于 css/JavaScript 解决方案的建议。

.middle {
  text-align: center;
}

div.middle>a>img {
    width: 5%;
    height: auto;
    margin: 1%;    
    display: inline-block;
}

div.middle>a>img:hover {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

.bottom {
  text-align: center;
  position: bottom;
}

<html lang="en">

<div class="middle">
<a href="#">  
    <img src="https://s-media-cache-ak0.pinimg.com/236x/cd/60/1b/cd601b925a3a4e9d8f014628cdc5319f.jpg"></img>
</a>  
  <a href="#">  
    <img src="http://cache3.asset-cache.net/xc/483563191.jpg?v=2&c=IWSAsset&k=2&d=dfVQxw_RW01UllXQDJmANBGyEsfRlCvmFFMTHdsW-_udu5G3Hp3lOIXpI8ZvjGSw0" class="img-responsive"></img> 
</a>  
<a href="#">    
 <img href="#" src="http://gallerydrawing.net/wp-content/uploads/2015/10/flower-vase-drawing-image-CpJh.jpg" class="img-responsive"></img>
</a>  
<br/>
  <a href="#">  
<a href="#"><img src="http://mhaycock.com/SiteImages/FrenchHorn.jpg" class="img-responsive"></img>
</a>
  <a href="#">  
 <img href="#" src="https://s-media-cache-ak0.pinimg.com/736x/58/82/0f/58820fd15cfc243b51df0f79aa209569.jpg" class="img-responsive"></img>
</a>  
<br/>
<a href="#">  
 <img src="https://thelingerieaddict-treaclemediallc.netdna-ssl.com/wp-content/uploads/Vintage-Corset-1.jpg" class="img-responsive"></img>
</a>
  
  
</div>  
<div class="bottom">
  <img href="#" src="https://s-media-cache-ak0.pinimg.com/236x/6e/69/cc/6e69cc9a8f346afffa4e198fd68df3b3.jpg" class="img-responsive"></img>
</div>

</html>

Answer 1

选项 1 - CSS

如果您想要一个不需要太多更改且不会使 JavaScript 复杂化的快速解决方案，也许您可以 "spice up" 使用一些 [=90] 来稍微设计一下=]:

通过不再对齐所有图像来打破网格外观：
- 添加随机边距（使用百分比使其在不同尺寸下看起来相似）。
- 使用不同的垂直对齐方式（baseline、middle、bottom、top...）。
转换图像，使它们不都指向同一个方向（注意转换将在鼠标悬停时被覆盖，除非您为 :hover 添加特定值）：
- 添加随机旋转（使用正值和负值）并使用不同的 transform-origin 值。
- 不限轮换：skew、translate、scale...
试验其他 CSS 属性和过滤器。

它仍然是一个三角形，但现在不会那么明显了。例如，这是一个建议：

.middle {
  text-align: center;
}

div.middle > a > img {
    width: 5%;
    height: auto;
    margin: 1%;    
    display: inline-block;
}

div.middle a:nth-of-type(1) img {
  transform:rotate(-15deg);
  margin-right:-2%;
  vertical-align:baseline;
}

div.middle a:nth-of-type(2) img {
  transform:rotate(-15deg);
  vertical-align:middle;
}

div.middle a:nth-of-type(3) img {
  vertical-align:bottom;
  transform:rotate(15deg);
}

div.middle a:nth-of-type(4) img {
  margin-right:5%;
  transform:skew(12deg);
}

div.middle a:nth-of-type(5) img {
   transform:rotate(-33deg);
}

div.middle a:nth-of-type(6) img {
   transform:rotate(33deg);
  margin-top:-30%;
}

div.middle > a > img:hover {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

.bottom {
  text-align: center;
  position: bottom;
}

<div class="middle">
  <a href="#"><img src="https://s-media-cache-ak0.pinimg.com/236x/cd/60/1b/cd601b925a3a4e9d8f014628cdc5319f.jpg"/></a>  
  <a href="#"><img src="http://cache3.asset-cache.net/xc/483563191.jpg?v=2&c=IWSAsset&k=2&d=dfVQxw_RW01UllXQDJmANBGyEsfRlCvmFFMTHdsW-_udu5G3Hp3lOIXpI8ZvjGSw0" class="img-responsive"/></a>  
  <a href="#"><img href="#" src="http://gallerydrawing.net/wp-content/uploads/2015/10/flower-vase-drawing-image-CpJh.jpg" class="img-responsive"/></a>
  <br/>
  <a href="#"><img src="http://mhaycock.com/SiteImages/FrenchHorn.jpg" class="img-responsive"/></a>  
  <a href="#"><img href="#" src="https://s-media-cache-ak0.pinimg.com/736x/58/82/0f/58820fd15cfc243b51df0f79aa209569.jpg" class="img-responsive"/></a>  
  <br/>
  <a href="#"><img src="https://thelingerieaddict-treaclemediallc.netdna-ssl.com/wp-content/uploads/Vintage-Corset-1.jpg" class="img-responsive"/></a>
</div>  
<div class="bottom">
  <img href="#" src="https://s-media-cache-ak0.pinimg.com/236x/6e/69/cc/6e69cc9a8f346afffa4e198fd68df3b3.jpg" class="img-responsive"/>
</div>

选项 2 - JavaScript

设置div.middle相对位置。
将图像设置为具有绝对位置。
将图像随机放置在容器中。

这样做的主要问题是您可能希望避免碰撞以使图像不重叠。为此，您可以使用多种算法或插件，它们可以像您想要的那样复杂。我的建议：不要重新发明轮子。您可以找到 many solutions this on Whosebug，使用适合您的那个。

另一个可能的问题是，您实际上可能想要保持那种三角形的感觉，这样图像就好像是从头脑中冒出来的想法。在这种情况下，上面链接的解决方案可能不适合您，您可能需要创建自己的解决方案。

选项 3 - CSS 和 JavaScript

不要局限于一种解决方案：将它们结合起来！不要只是用 JavaScript 随机放置图像，也可以使用 CSS 来转换它们。旋转它们，倾斜它们，翻译它们（尽管现在可能没用了），添加动画，所以一些图像 "shake" 或 "dance" 随机出现以引起用户的注意...

以非网格方式定位图像

Position images in a non-grid like way

html

css

bootstrapping