基于屏幕大小可见的图库图像

Question

我需要一个摄影画廊显示在3行，每行显示不同数量的图像。不是所有的图像都有相同的宽度。当屏幕调整大小时，我想要显示更多的图像，但以相同的比例(放大到3/5/4，4/6/5，等等)。比率应如下所示(括号表示图像)：

[][]
[][][][]
[][][]

Visual example here.

除了补偿外，它还起到了部分作用。我试着写一个偏移量循环，但现在它根本不能工作。代码如下：

<script>
jQuery(document).ready(function() {
jQuery('.gallery').wrap('<div class="gal-wrapper" />');
  resizeGallery("#gallery-1",2);
  resizeGallery("#gallery-2",4);
  resizeGallery("#gallery-3",3);
});
jQuery(window).resize(function() {
  resizeGallery("#gallery-1",2);
  resizeGallery("#gallery-2",4);
  resizeGallery("#gallery-3",3);
});

function resizeGallery(gall, initpos){
var x = 0;
var y = 0;
var accum_width = 0;
var final_width = accum_width;
var offset = initpos;
var wW = jQuery(window).width()-jQuery("#nav").width();

while(accum_width < wW){

    var new_width = jQuery(gall).find("img.attachment-medium:eq("+x+")").width();
    if((accum_width + new_width) > wW){
        break;
    }else{
        accum_width += new_width+4;
    }
    x++;
}
/* worked partly to this point... onto the offset! */ 
while(y < offset){
    var subtract_width = jQuery(gall).find("img.attachment-medium:eq("+x+")").width();
    final_width -= subtract_width+4;
    y++;
    x--;
}


jQuery(gall).parent().width(final_width);
}
</script>

Here is a jsfiddle example。

Answer 1

Your working JS fiddle

以防小提琴链接不起作用...

jQuery(document).ready(function() {
    jQuery('.gallery').wrap('<div class="gal-wrapper" />');
    var picCount = resizeGallery("#gallery-2", Number.POSITIVE_INFINITY);
    resizeGallery("#gallery-3", picCount-1);
    resizeGallery("#gallery-1", picCount-2);
});
jQuery(window).resize(function() {
    var picCount = resizeGallery("#gallery-2", Number.POSITIVE_INFINITY);
    resizeGallery("#gallery-3", picCount-1);
    resizeGallery("#gallery-1", picCount-2);
});

function resizeGallery(gall, picCount) {
    var x = 0;
    var y = 0;
    var accum_width = 0;
    var wW = jQuery(window).width() - jQuery("#nav").width();

    while (accum_width < wW && x < picCount) {

        var new_width = jQuery(gall).find("img.attachment-medium:eq(" + x + ")").width();
        if ((accum_width + new_width) > wW) {
            break;
        } else {
            accum_width += new_width + 4;
        }
        x++;
    }

    jQuery(gall).parent().width(accum_width);

    return x;
}