2

我正在发现 Masonry 并尝试将其用于我的网站。最终目标是拥有像 500px.com 或类似的东西一样流畅的东西。到目前为止，我已经玩过 Masonry 并尝试遵循该论坛的教程和建议，这非常有帮助！- 谢谢

现在这就是我得到的：http ://www.thejunglemurmurs.com/tags3.php ://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>

我想知道我在这里是否遗漏了什么，或者是否有一些准则可以正确填充容器将图片（方形图片，列之间的比例......）

4

1 回答 1

0

您的网格需要在 Masonary 中设置为固定大小，并且您的元素需要被控制。

查看 500px 并看到高度都设置为 500px 高度（这就是我认为它称为 500px 的原因..）

所以每行是 500px .. 但有些图片是 250px 的一半大小，所以它们很合适。我看了你的例子，所有的图片都有不同的尺寸——所以它非常努力地安排它，但网格到处都是。

 var gridSize = 500;
 widgets.masonry({
        itemSelector: '.Widget',
        columnWidth: GridSize
    });

然后你必须确保你的 DIV 不大于 500 或 500 的倍数，即。125px,250px,500px,750px ...然后它会很好地填充。显然，它可以是您需要的任何尺寸，但工程只能由您决定，根据我的经验，它有点棘手......但一旦它起作用，它就很棒。

这是一个很棒的插件，我认为如果存在差距，还可以选择强制进行主动排序或自动调整大小。

于 2012-07-12T10:15:36.620 回答