以类似非网格的方式定位图像

我想按照下图中的图像将图像定位在网页上的某种“思想云”效果中。这些将最终成为网站上其他页面的链接并充当导航。以类似非网格的方式定位图像

我至今为中心的图像下面的倒金字塔。他们看起来不错，但我希望他们在允许的范围内有更多的自由浮动感，同时保持对分辨率的响应。

任何意见的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>

来源

2015-12-02 notidaho

选项1 - CSS

如果你想快速的解决方案，并不需要很多的变化和不事用JavaScript或许你还可以复杂化，“通过使用一些CSS一点点的设计：

Break通过不再具有所有图像对齐的网格外观：
- 添加随机边距（使用百分比来保持它在不同尺寸中看起来相似）。
- 使用不同的垂直对齐（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来转换它们。旋转它们，歪斜它们，翻译它们（尽管现在可能没用），添加动画以使随机时间的某些图像“摇动”或“跳舞”，以吸引用户的注意力......

来源

2015-12-02 19:11:25

非常感谢回答我认为CSS本身可以做到这一点。但是，当我将CSS复制到Wordpress网站时，它似乎不工作。任何想法为什么？ http://iancolenutt.com/ – notidaho

上面的解决方案是特定于代码的，可能有所改变。你能分享失败的代码吗？或一个URL来看看它？ –

失败的代码与上面发布的完全相同，除了WordPress以外，其他地方都可以使用。网址是www.iancolenutt.com – notidaho

以类似非网格的方式定位图像

回答

相关问题