ギャラリーの画像は、画面サイズに基づいて表示されます

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