2つのULの中のリストをランダムで隙間なく表示

質問

よろしくお願いいたします。

タイトル、ちょっと詰め込みすぎました。。

■幅が400pxのdivの中に200pxのulを2つ並べてあります。
■ulの中に200pxサイズのboxと100pxサイズの正方形ボックス（li）があります。
■2つのulの中にあるliを一度全て合わせて、それをランダムにして表示したいです。
■その際、100pxサイズのボックスは必ず2個セットで表示させたいです。
↑100pxが1個しか表示されない列は100pxの隙間が出来てしまうため。

ulごとのランダムはできたのですが、2つのulのliを合わせてランダムに出力するのがうまくいきません。
隙間についても、どういう風にコーディングをすればいいのか悩んでます。。

参考サイトでも構いません。アドバイスをお願いいたします。

[html]
<style>
div{width:400px;}
ul{width:200px;display:inline-block;}
li{display:inline-block;}
.size100{width:100;height:100;}
.size200{width:200;height:200;}
</style>

<div randomdisplay="10">
<ul class="rnd_a">
<li class="width100">0</li>
<li class="width200">1</li>
<li class="width100">2</li>
<li class="width200">3</li>
<li class="width100">4</li>
</ul>
<ul class="rnd_b">
<li class="width200">5</li>
<li class="width100">6</li>
<li class="width100">7</li>
<li class="width100">8</li>
<li class="width200">9</li>
</ul>
</div>

[js]
jQuery(function($) {
$.fn.extend({
randomdisplay : function(num) {
return this.each(function() {
var chn = $(this).children(".rnd_a").children("li").hide().length;
var chn2 = $(this).children(".rnd_b").children("li").hide().length;

for(var i = 0; i < num && i < chn; i++) {
var r = parseInt(Math.random() * (chn - i)) + i;

$(this).children(".rnd_a").children("li").eq(r).show().prependTo($(this).children(".rnd_a"));
console.log(r);
}

for(var i = 0; i < num && i < chn2; i++) {
var r = parseInt(Math.random() * (chn2 - i)) + i;

$(this).children(".rnd_b").children("li").eq(r).show().prependTo($(this).children(".rnd_b"));
}
});
}
});

$(function(){
$("[randomdisplay]").each(function() {
$(this).randomdisplay($(this).attr("randomdisplay")).children(".rnd_a").children("li");
});
});
});

javascriptについてあまり知識がなく、WEB上から見つけたものを流用しております。
chnで数を取得し、rでランダム、$(this).children(".rnd_a").children("li").eq(r).show().prependTo($(this).children(".rnd_a"));
で出力しているのだと思うのですが、新しい変数にchn + chn2としてランダムさせるとめちゃくちゃに。。

よろしくお願いいたします。

回答No.2

yuu_x

提示したコードでランダムになってないですか？