Создать стену для поста из блоков

Question

Создать стену для поста из блоков

0

Мне нужен способ создать стену из блоков. Идея заключалась в следующем: я получаю информацию через php, затем я повторяю их в div.

Stylesheet
.block{
min-height:100px;
min-width:190px;
background-color:#999;
float:left;
margin-bottom:10px;
margin-left:5px;
margin-right:5px;
}
.holder{
width:800px;
height:100%;
margin: 0 auto;
}

Здесь html:

<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class='holder'>
<? *connect to the db*
my_query=mysql_query("SELECT * FROM news");
while($array=mysql_fetch_array(my_query)){
echo "<div class='block' id='block_".$array['id']."'>".$array['text']."<div>";
}
?>
</div>
</body>
</html>

Теперь проблема состоит в том, что, очевидно, что блоки имеют одинаковую высоту и ту же ширину, и поэтому поплавок влево создает ужасный запас между блоками и правой стороной держателя.

Как они должны быть http://img17.imageshack.us/img17/1813/cy44.png Как они отображают http://img716.imageshack.us/img716/9703/lnyr.png Идеи: для ширины я мог бы использовать jquery возможно, создавая идентификатор эхом.

if($('#block_'+id).css('width')>590){$('#block_'+id).css('width','790')}
if($('#block_'+id).css('width')>390){$('#block_'+id).css('width','590')}
if($('#block_'+id).css('width')>190){$('#block_'+id).css('width','390')}

Это должно сделать трюк для ширины, но как насчет высоты? Должен ли я попытаться создать функцию, установите абсолютное положение всего элемента на основе высоты элемента, который раньше?

user2803734 22 сен. 2013, в 11:14

Источник

Теги:

php

javascript

jquery

css

2 ответа

Ещё вопросы

user2803734 · Answer 1 · 2013-09-23T09-46-00.000Z

Хунгерстар указал, что уже существует масонство. Это сделал трюк.

Senthilkumar Srinivasan · Answer 2 · 2013-09-22T05-48-00.000Z

Я не понимаю вашего требования. Но вы можете сделать одну вещь, чтобы установить класс comman для всех элементов, которые говорят ".elements", и после визуализации вы можете получить все элементы, которые вы можете использовать для всех элементов, подобных приведенным ниже.

$ (Документ).ready (функция() {

$('.elements')  // and you do want you want to do.

})

Я установил общий блок класса, но в элементе может быть больше текста, чем в другом, поэтому элемент может увеличиться. Мне не нужно редактировать все элементы, мне нужно установить положение каждого из них.
Hungerstar указал, что уже существует [масонство] [1]. Это добилось цели. [1]: masonry.desandro.com
@ user2803734: Вы должны опубликовать это как ответ и принять его, чтобы другие могли видеть, что ваша проблема была решена, особенно если вы решили ее самостоятельно :)
Я должен ждать больше 21 часа, чтобы сделать это.