Question

我正试图按照下面的图片将图像放在网页上的“思想云”效果中。这些最终将成为网站上其他页面的链接，并用作导航。

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

对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复杂化，那么你可以通过使用一些CSS来“设计”一点设计：

通过不再对齐所有图像来打破网格外观：
- 添加随机边距（使用百分比使其看起来与不同尺寸相似）。
- 使用不同的垂直对齐方式（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 for this on StackOverflow，使用适合您的。

另一个可能的问题是，你可能真的想要保持那种三角形的感觉，所以看起来这些图像是作为想法而出现的。在这种情况下，上面链接的解决方案可能不适合您，您可能需要创建自己的解决方案。

选项3 - CSS和JavaScript

不要限制一种解决方案或另一种解决方案：合并它们！不要只使用JavaScript随机放置图像，也可以使用CSS进行转换。旋转它们，歪斜它们，翻译它们（虽然现在可能没用），添加动画使一些图像随机时间“摇晃”或“跳舞”以吸引用户注意......

以非网格方式定位图像

1 个答案: