如何使用隨機大小的div創建隨機布局的網格

Question

我正在嘗試創建類似於此的網站布局 -

http://www.mondieu.nu/mishmash/fashion/

如何讓“網格”中的div具有不同的大小並顯示在類似的布局中？ 到目前為止，我有一些jQuery：

$('.post-image img').each(function(){ $(this).css('width', (50+(Math.random()*700))) })

任何幫助將不勝感激。

Answer 1

您引用的網站有一些內置的內容。 前兩個圖像看起來更加固定，兩者都對齊到頂部並占據了大約一半的頁面（居中）。 在那之后，它看起來像是在左側浮動的div中，並且可能具有隨機邊距以將它們偏離它們應該的位置。 然后div中的圖像具有隨機寬度，如上所述。

所以，如果我是你，我會先將一些圖像（比如說10個）放在一個容器div中並將它們向左浮動。 然后我會為它們添加隨機偏移（隨機邊距或px中的隨機頂部/底部（位置相對或絕對））。 然后，您可以嘗試隨機更改圖像大小。

最后，一旦你有了這個工作，你可以在頂部查看更有序的東西，使它看起來像在向下滾動時從有序變為隨機，而不是僅僅隨機開始。

要記住的另一件事是它如何在較小的設備和較大的設備上進行擴展。 當你向下縮小時，左邊的浮動只會將圖像包裹在彼此之下，這很酷，如果你的圖像可以是頁面寬度的百分比，你也可以將它們縮小以適應較小的頁面。

Answer 2

嘗試這個：
$（'。post-image img'）。each（function（）{$（this）.css（'width'，（50+（Math.random（）* 700））+'px'）;}）;

Answer 3

在.each()

關鍵字this指的是元素

你可以使用this.width = 50 + (Math.random() * 700)來設置<img>元素width屬性

 $(function() { $(".post-image img").each(function() { this.width = 50 + (Math.random() * 700) }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <div class="post-image"> <img src="http://lorempixel.com/100/100?=1" /> <img src="http://lorempixel.com/100/100?=2" /> <img src="http://lorempixel.com/100/100?=3" /> </div>