1

私は自分のDBレスフォトギャラリー（ここに住んでいます）をローリングしていて、Masonryを使用して多くの空白なしでサムネイルをレイアウトしたいと思います（これは私のサイトの「灰色のスペース」のようなものですが）。

私はそれを正しく実装していると信じています：

var $container=$('#main');
        $container.imagesLoaded(function(){
            $container.masonry({
                itemSelector : '.box',
                columnWidth: 200
            });
        });

おそらく1つの問題は、サムネイルの端を丸めるために別のコードを使用していることです。

$("img.rounded_corners").each(function() {
            $(this).wrap('<div class="box rounded_corners" />');
            var imgSrc = $(this).attr("src");
            var imgHeight = $(this).height();
            var imgWidth = $(this).width();
            $(this).parent()
                .css("background-image", "url(" + imgSrc + ")")
                .css("background-repeat","no-repeat")
                .css("background-color","#fff")
                .css("height", imgHeight + "px")
                .css("width", imgWidth + "px");
            $(this).remove();
        });

これは基本的に、画像をdivに置き換えます。これには、適切な「box」クラスを追加しました。

それでも、ページのレイアウトは、私が何をしても変更されません。何が問題なのですか？

ありがとう！

4

1 に答える 1

2

今それを手に入れました...私はこれを前に見たことがない方法がわかりません

組積造/jQueryバージョンのバグではありません

div内のすべての画像をラップしていたスクリプトは.box、画像がドキュメントに読み込まれる前に実行されていました。そのため、何も選択されておらず、石積みスクリプトを実行したときに、boxクラスを持つ要素はありませんでした。

したがって、最後のスクリプトを本文の最後に移動します

<script type="text/javascript">
            Shadowbox.init();
            $("img.rounded_corners").each(function() {
                $(this).wrap('<div class="box rounded_corners" />');
                var imgSrc = $(this).attr("src");
                var imgHeight = $(this).height();
                var imgWidth = $(this).width();
                $(this).parent()
                    .css("background-image", "url(" + imgSrc + ")")
                    .css("background-repeat","no-repeat")
                    .css("background-color","#fff")
                    .css("height", imgHeight + "px")
                    .css("width", imgWidth + "px");
                $(this).remove();
            });
            var $container=$('#main');
            $container.imagesLoaded(function(){
                $container.masonry({
                    itemSelector : '.box',
                    columnWidth: 200
                });
            });
            </script>
</body> <!-- just above the end of the body. In fact, this is said to be a good practice: leave the external js files in the head, and inline js at the end -->
于 2012-07-15T16:20:15.647 に答える