Как создать случайно выложила сетку с дивой случайных размеров

Question

Я пытаюсь создать сайт макет, похожее на это -

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

Как я могу получить дивы в «сетке» быть разных размеров и появляться в макете, подобном этому? До сих пор у меня есть этот бит JQuery:

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

Любая помощь будет оценена.

Answer 1

Существует немного встроенного для сайта, на который вы ссылаетесь. Первые два изображения выглядят более фиксированными, оба выровнены сверху и занимают примерно половину страницы (в центре). После этого похоже, что изображения находятся в divs, которые перемещаются слева и, возможно, имеют произвольный запас, чтобы компенсировать их там, где они должны быть. Изображения внутри div имеют случайную ширину, как вы пытались сделать выше.

Итак, если бы я был вами, я бы начал с размещения некоторых изображений (скажем, 10) в контейнере div и плавания их влево. Затем я играл бы с добавлением к ним случайных смещений (случайные поля или случайный верх/низ в пикселях (с относительным или абсолютным положением)). Затем вы можете произвольно изменить размер изображения.

Наконец, как только вы получите эту работу, вы можете посмотреть что-то более упорядоченное сверху, чтобы оно выглядело так, будто оно смещается от упорядоченного к случайному при прокрутке вниз, а не только от случайного.

Еще одна вещь, о которой следует помнить, - это то, как это масштабируется на устройствах меньшего размера и больших размеров. Поплавок влево будет просто обертывать изображения друг под друга, когда вы уменьшаете масштаб, что здорово, если ваши изображения могут составлять% от ширины страницы, вы также можете масштабировать их для работы на более мелких страницах.

Answer 2

Попробуйте это:
$ каждый (функция() { $ (это) .css ('ширина ' (50 + (Math.random() * 700) (' IMG пост-изображения.').) + '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>