Question

我需要一种方法来创建一个由块组成的墙。这个想法是：我通过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也许可以通过echo创建id。

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')}

这应该是宽度的技巧，但高度怎么样？我应该尝试创建一个函数，根据之前元素的高度设置所有元素的绝对位置吗？

Answer 1

我不清楚你的要求。但你可以做一件事，为所有元素设置comman类，说'.elements'，一旦渲染你就可以获得所有元素，你可以在下面的命令中使用所有元素。

（文档）$。就绪（函数（）{

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

}）

Answer 2

Hungerstar指出已存在Masonry。它成功了。

为块制成的帖子创建墙

2 个答案: