以類似非網格的方式定位圖像

我想按照下圖中的圖像將圖像定位在網頁上的某種「思想雲」效果中。這些將最終成爲網站上其他頁面的鏈接並充當導航。以類似非網格的方式定位圖像

我至今爲中心的圖像下面的倒金字塔。他們看起來不錯，但我希望他們在允許的範圍內有更多的自由浮動感，同時保持對分辨率的響應。

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

以類似非網格的方式定位圖像

回答

相關問題