我发现了Masonry，并试图将其用于我的网站。最终目标将是拥有像500px.com这样平滑的东西或类似的东西。到目前为止，我已经玩了Masonry，并试图遵循这个论坛的教程和建议，这非常有帮助！-感谢
现在我得到的是：http://www.thejunglemurmurs.com/tags3.php但不幸的是，它没有教程那么好，我有点失望。。。我本以为容器会更好地装满，现在我看到很多洞。
这是我的代码：
<html>
<head>
<style type="text/css">
#container {
width: 1000px;
border: 1px solid black;
}
.masonryImage {
float: left;
background: #BBBBBB;
border-radius: 5px;
margin:5px;
padding:5px;
width:180px;
}
.col1{width:180px;}
.col2{width:280px;}
.col3{width:380px;}
.col4{width:480px;}
.col1 img{max-width:180px;}
.col2 img{max-width:280px;}
.col3 img{max-width:380px;}
.col4 img{max-width:480px;} }
</style>
</head>
<body>
<div id="container">
<?
$i=0;
// pics is filled with the number of the picture from SQL
while (isset($pics[$i])){
$pic = $pics[$i];
$j = $view[$i];
echo "<div class='"masonryImage col$j'"><img src='"http://www.thejunglemurmurs.com/photos/$pic.jpg'" alt='"'"></div>";
$i++;
}
?>
</div>
<script src="http://www.thejunglemurmurs.com/js/jquery.1.7.1.min.js"></script>
<script src="http://www.thejunglemurmurs.com/js/masonry/jquery.masonry.min.js"> </script>
<script>
var $container = $('#container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.masonryImage'
});
});
</script>
</body>
</html>
我想知道这里是否有我遗漏的东西，或者是否有一些正确填充的指南，容器将显示图片（方形图片、列间比例…）
您的网格需要在Masonary中设置为固定大小，并且需要控制元素。
看看500px，看到高度都是一样的，设置在500px的高度（这就是为什么它被称为500px，我想..）
所以每行都是500像素。。但有些图片只有250px的一半大小，所以它们很合身。我看了你的例子，所有的图片都有不同的尺寸，所以它很难安排，但网格到处都是。
var gridSize = 500;
widgets.masonry({
itemSelector: '.Widget',
columnWidth: GridSize
});
然后你必须确保你的DIV不大于500或500的倍数，即125px、250px、500px、750px。。。那么它会很好地填充。很明显，它可以是你需要的任何尺寸，但工程设计只取决于你，根据我的经验，这有点棘手。。但一旦成功，那就太棒了。
这是一个很棒的插件，我认为如果存在缺口，还可以强制进行激进排序或自动调整大小。