javascript - 基于屏幕尺寸可见的图库图像

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

如果那个 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;
}