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

根据屏幕大小显示图库图像

1 个答案: