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

Question

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

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

如何让 "grid" 中的 div 具有不同的大小并以类似的布局显示？到目前为止，我有一点 jQuery:

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

任何帮助将不胜感激。

Answer 1

试试这个：
$('.post-image img').each(function(){ $(this).css('width', (50+(Math.random()*700)) + 'px'); });

Answer 2

在.each()

之内

the keyword this refers to the element

您可以使用 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>

Answer 3

为了您引用的站点，有一点内置。前两张图片看起来更固定，都与顶部对齐并占据了大约一半的页面（居中）。在那之后，看起来图像在 divs 中，它们向左浮动，并且可能有一个随机边距以将它们从它们应该在的位置偏移。 div 中的图像将具有您在上面尝试过的随机宽度。

因此，如果我是你，我会先将一些图像（比如 10 张）放入容器 div 中，然后将它们向左浮动。然后我会尝试为它们添加随机偏移量（随机边距或 px 中的随机 top/bottom（相对位置或绝对位置））。然后您可以尝试随机更改图像大小。

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

要记住的另一件事是它如何在较小的设备和较大的设备上扩展。向左浮动只会在您缩小图像时将图像彼此包裹起来，这很酷，如果您的图像可以占页面宽度的 %，您也可以将它们缩小以在较小的页面上工作。

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

How to create randomly laid out grid with divs of random sizes

javascript

jquery

html

css

grid-layout