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

我需要一个摄影画廊，以显示在3行，每行显示不同数量的图像。并非所有图像都具有相同的宽度。当屏幕调整大小时，我希望显示更多的图像，但比例相同（增长到3/5/4、4/6/5等）。比率应如下所示（括号表示图像）：

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

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

jQuery（文档）.ready（函数（）{
jQuery（'.gallery'）.wrap（''）；
调整画廊的大小（“画廊-1”，2）；
调整画廊的大小（“画廊-2”，4）；
调整画廊的大小（“画廊-3”，3）；
});
jQuery（窗口）.resize（函数（）{
调整画廊的大小（“画廊-1”，2）；
调整画廊的大小（“画廊-2”，4）；
调整画廊的大小（“画廊-3”，3）；
});
函数大小库（gall，initpos）{
var x=0；
var y=0；
var累计宽度=0；
var最终宽度=累计宽度；
var offset=initpos；
var wW=jQuery（window.width（）-jQuery（“#nav”）.width（）；
同时（累计宽度wW）{
打破
}否则{
累计宽度+=新宽度+4；
}
x++；
}
/*部分工作到此点…在偏移量上！*/
while（y

.

如果小提琴链接不起作用

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;
}

jQuery（文档）.ready（函数（）{
jQuery（'.gallery'）.wrap（''）；
var picCount=大小画廊（“画廊-2”，数字为正无穷大）；
调整画廊大小（“画廊-3”，picCount-1）；
调整画廊大小（“画廊-1”，picCount-2）；
});
jQuery（窗口）.resize（函数（）{
var picCount=大小画廊（“画廊-2”，数字为正无穷大）；
调整画廊大小（“画廊-3”，picCount-1）；
调整画廊大小（“画廊-1”，picCount-2）；
});
函数大小库（gall，picCount）{
var x=0；
var y=0；
var累计宽度=0；
var wW=jQuery（window.width（）-jQuery（“#nav”）.width（）；
同时（累计宽度wW）{
打破
}否则{
累计宽度+=新宽度+4；
}
x++；
}
jQuery（gall）.parent（）.width（累计宽度）；
返回x；
}

如果小提琴链接不起作用

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;
}

jQuery（文档）.ready（函数（）{
jQuery（'.gallery'）.wrap（''）；
var picCount=大小画廊（“画廊-2”，数字为正无穷大）；
调整画廊大小（“画廊-3”，picCount-1）；
调整画廊大小（“画廊-1”，picCount-2）；
});
jQuery（窗口）.resize（函数（）{
var picCount=大小画廊（“画廊-2”，数字为正无穷大）；
调整画廊大小（“画廊-3”，picCount-1）；
调整画廊大小（“画廊-1”，picCount-2）；
});
函数大小库（gall，picCount）{
var x=0；
var y=0；
var累计宽度=0；
var wW=jQuery（window.width（）-jQuery（“#nav”）.width（）；
同时（累计宽度wW）{
打破
}否则{
累计宽度+=新宽度+4；
}
x++；
}
jQuery（gall）.parent（）.width（累计宽度）；
返回x；
}

同样的比例，你的意思是下一个屏幕大小是4/8/6图像还是3/5/4，或者其他？当足够的空间可用时，它会增长到3/5/4、4/6/5等。stackoverflow厌倦了画廊问题吗？请耐心等待，如果可以的话，在jsfiddle.net上提供一把小提琴。如果在循环时删除偏移，则将最后一行从~~~.width（最终宽度）更改为~~~.width；至~~~.宽度（累计宽度）；然后你会看到它部分工作。同样的比例，你的意思是下一个屏幕大小是4/8/6图像还是3/5/4，或者其他？当足够的空间可用时，它会增长到3/5/4、4/6/5等。stackoverflow厌倦了画廊问题吗？请耐心等待，如果可以的话，在jsfiddle.net上提供一把小提琴。如果在循环时删除偏移，则将最后一行从~~~.width（最终宽度）更改为~~~.width；至~~~.宽度（累计宽度）；然后你会看到它部分工作。