Question

我正在尝试创建类似于此的网站布局 -

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

如何在＆＃34; grid＆＃34;中获取div？是不同大小，并出现在类似的布局？到目前为止，我有一些jQuery：

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

任何帮助将不胜感激。

Answer 1

为您引用的网站添加了一些内容。前两个图像看起来更加固定，两者都对齐到顶部并占据了大约一半的页面（居中）。在那之后，它看起来像是在左侧浮动的div中，并且可能具有随机边距以将它们偏离它们应该的位置。然后div中的图像具有随机宽度，如上所述。

所以，如果我是你，我会先将一些图像（比如说10个）放在一个容器div中并将它们向左浮动。然后我会为它们添加随机偏移（随机边距或px中的随机顶部/底部（位置相对或绝对））。然后，您可以尝试随机更改图像大小。

最后，一旦你完成了这项工作，你可以在顶部查看更有序的内容，使其看起来像在向下滚动时从有序变为随机，而不是仅仅是随意开始。

要记住的另一件事是它如何在较小的设备和较大的设备上进行扩展。当你向下缩小时，左边的浮动只会将图像包裹在彼此之下，这很酷，如果你的图像可以是页面宽度的百分比，你也可以缩小它们以在较小的页面上工作。

Answer 2

试试这个：
$（＆＃39; .post-image img＆＃39;）。each（function（）{ $（this）.css（＆＃39; width＆＃39;，（50+（Math.random（）* 700））+＆＃39; px＆＃39;）; }）;

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>

如何使用随机大小的div创建随机布局的网格

3 个答案: