2

Masonry を発見し、それを自分の Web サイトに使用しようとしています。最終的な目標は、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>

ここで見逃したものがあるかどうか、またはコンテナーを適切に埋めるためのガイドラインがあるかどうかを知りたいです (正方形の写真、列間の比率...)

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 に答える