我发现了砌体，并试图将其用于我的网站。
最终目标是使内容平滑如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的原因。）
因此，每行为500px ..但有些图片的尺寸为250px的一半，因此非常适合。
我看了看您的示例，所有图片都有各种尺寸-因此很难进行排列，但是网格遍布整个地方。
var gridSize = 500;
widgets.masonry({
itemSelector: '.Widget',
columnWidth: GridSize
});
然后，您必须确保DIV不大于500或500的倍数，即。 125px，250px，500px，750px ...然后它将很好地填充。显然，它可以是您需要的任何大小，但根据我的经验进行工程设计只能由您决定，..但是，一旦工作，它就很棒。
这是一个很棒的插件，我认为还有一个option可以在存在差距的情况下强制进行主动排序或自动调整大小。
关于php - 砌体jQuery-对结果不满意，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11413108/