3

在这里查看我的网站：http ://www.element17.com 。可能需要更改为与默认专辑不同的专辑，以便获得更多可用的缩略图。巴黎专辑中的图像最多。

如果您单击右下角的“显示照片网格”按钮，您将看到我设计的照片/缩略图网格。

现在它随着视口缩放，我希望它继续这样做，但不是随着视口平滑地增加大小，我希望它只与当前适合的缩略图数量一样宽视口，以便显示的缩略图数量的右侧没有空白。我希望它与视口右侧保持 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_outerto auto，如果缩略图少于一排，它将表现出我想要的行为，但如果有超过一排的项目，它将延伸到视口的最左侧。任何人都可以帮忙吗？

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 回答