3

ここで私のサイトを参照してください: http://www.element17.com . より多くのサムネイルを利用できるようにするために、デフォルト以外のアルバムに変更することが望ましい場合があります。パリのアルバムには、最も多くの画像が含まれています。

右下の [Show Photo Grid] ボタンをクリックすると、私が考案した写真/サムネイル グリッドが表示されます。

現在、ビューポートに合わせてスケーリングしていますが、これを続けたいと思っていますが、ビューポートでサイズをスムーズに拡大するのではなく、現在これにより、表示されたサムネイルの数の右側に空の空白がなくなります。ビューポートの右側から 20px のままにして、左側に空のスペースを表示したいと思います。

これはどのように達成できますか？

現在のコードは次のとおりです。

HTML

<div id="grid_outer">
  <div id="grid_inner">
    <div class="grid_thumb button">
      <span class="thumb_title">TITLE</span>
      <img class="thumb_image" src="image.jpg" alt="TITLE">
    </div>
    <div class="grid_thumb button">
      <span class="thumb_title">TITLE2</span>
      <img class="thumb_image" src="image2.jpg" alt="TITLE2">
    </div>
  </div>
</div>

CSS

#grid_outer {display:none; position:absolute; background-color:rgba(0,0,0,0.75); right:20px; left:20px; bottom:60px; padding:20px 10px 10px 20px; border-radius:20px; max-height:480px; overflow:hidden;}
.grid_thumb {position:relative; float:left; margin:0 10px 10px 0; width:150px; height:150px;}
.thumb_image {position:absolute; top:0; left:0; border-radius:5px;}
.thumb_title {position:absolute; bottom:0px; left:0px; z-index:100; padding:8px; background:#000; border-radius:0 5px 0 5px;}
.button {cursor:pointer;}

したがって、の幅を に設定する#grid_outerとauto、サムネイルが 1 行未満の場合は希望どおりに動作しますが、アイテムの行が複数ある場合はビューポートの左端まで伸びることがわかりました。誰でも助けることができますか？

4

1 に答える 1

1

CSS のみのソリューション ( http://caniuse.com/#feat=css-sel3、http://caniuse.com/#feat=css-mediaqueries )

http://jsfiddle.net/coma/G7bx8/6/embedded/result/

div.grid {
    font-size: 170px;
    position: fixed;
    max-width: 1em;
    height: 3em;
    bottom: 20px;
    right: 20px;
    padding: 5px;
    background-color: rgba(0, 0, 0, .75);
    border-radius: 20px;
    overflow: auto;
}

div.grid:after {
    display: block;
    content: "";
    clear: both;
}

div.grid > div {
    width: 160px;
    height: 160px;
    float: left;
    margin: 5px;
    border-radius: 10px;
    background-color: #009dff;
}

@media screen and (min-width: 410px) {
    div.grid {
        max-width: 2em;
    }

    div.grid > nth-child(2n) {
        clear: right;
    }
}

@media screen and (min-width: 550px) {
    div.grid {
        max-width: 3em;
    }

    div.grid > nth-child(3n) {
        clear: right;
    }
}

@media screen and (min-width: 720px) {
    div.grid {
        max-width: 4em;
    }

    div.grid > nth-child(4n) {
        clear: right;
    }
}

@media screen and (min-width: 890px) {
    div.grid {
        max-width: 5em;
    }

    div.grid > nth-child(5n) {
        clear: right;
    }
}

@media screen and (min-width: 1060px) {
    div.grid {
        max-width: 6em;
    }

    div.grid > nth-child(6n) {
        clear: right;
    }
}

@media screen and (min-width: 1230px) {
    div.grid {
        max-width: 7em;
    }

    div.grid > nth-child(7n) {
        clear: right;
    }
}

@media screen and (min-width: 1400px) {
    div.grid {
        max-width: 8em;
    }

    div.grid > nth-child(8n) {
        clear: right;
    }
}

@media screen and (min-width: 1570px) {
    div.grid {
        max-width: 9em;
    }

    div.grid > nth-child(9n) {
        clear: right;
    }
}

@media screen and (min-width: 1740px) {
    div.grid {
        max-width: 10em;
    }

    div.grid > nth-child(10n) {
        clear: right;
    }
}

jQuery ソリューション

http://jsfiddle.net/coma/G7bx8/7/embedded/result/

var size = 170;
var margin = 40;
var win = $(window);
var adjust = function() {

    $('div.grid').each(function() {

        var width = win.width() - margin;
        width = Math.floor(width / size) * size;

        $(this).width(width);
    });
};

win.resize(adjust);
adjust();
于 2013-11-08T21:32:41.990 に答える