我有一个三列布局,每列有多个div,用于保存类似内容的块:
<section class="info-blocks-container clearfix">
<div id="col1">
<div class="info-block">...</div>
<div class="info-block">...</div>
<div class="info-block">...</div>
</div>
<div id="col2">
<div class="info-block">...</div>
<div class="info-block">...</div>
</div>
<div id="col3">
<div class="info-block">...</div>
<div class="info-block">...</div>
<div class="info-block">...</div>
</div>
</section>
我想随机地在列中的div#col1
,div#col2
和div#col3
内随机播放子节点,因此#col1
的一些子节点会结束在#col2
和/或#col3
中,反之亦然。我正在使用codeparadox function reorder()
找到here(我删除了'撤消'功能)并且洗牌工作正常,但是
1.我有3个单独的重复功能的方式很脏,而且
2.它只对每列中的div进行排序(它不会在三列中共享子div):
<script type="text/javascript">
$(function(){
reorder();
reorder2();
reorder3();
function reorder() {
var grp = $(".info-blocks-container > div:nth-child(1)").children();
var cnt = grp.length;
var temp, x;
for (var i = 0; i < cnt; i++) {
temp = grp[i];
x = Math.floor(Math.random() * cnt);
grp[i] = grp[x];
grp[x] = temp;
}
$(grp).remove();
$(".info-blocks-container > div:nth-child(1)").append($(grp));
}
function reorder2() {
var grp = $(".info-blocks-container > div:nth-child(2)").children();
var cnt = grp.length;
var temp, x;
for (var i = 0; i < cnt; i++) {
temp = grp[i];
x = Math.floor(Math.random() * cnt);
grp[i] = grp[x];
grp[x] = temp;
}
$(grp).remove();
$(".info-blocks-container > div:nth-child(2)").append($(grp));
}
function reorder3() {
var grp = $(".info-blocks-container > div:nth-child(3)").children();
var cnt = grp.length;
var temp, x;
for (var i = 0; i < cnt; i++) {
temp = grp[i];
x = Math.floor(Math.random() * cnt);
grp[i] = grp[x];
grp[x] = temp;
}
$(grp).remove();
$(".info-blocks-container > div:nth-child(3)").append($(grp));
}
});
</script>
有什么建议吗?
答案 0 :(得分:1)
首先,您不需要三个看起来相似的功能。你可以用一种方法来施展它:
reorder();
function reorder(columnObject) {
$(".info-blocks-container").find("DIV[id^='col']").each(function()
{
var grp = $(this).children();
var cnt = grp.length;
var temp, x;
for (var i = 0; i < cnt; i++)
{
temp = grp[i];
x = Math.floor(Math.random() * cnt);
grp[i] = grp[x];
grp[x] = temp;
}
$(grp).remove();
$(this).append($(grp));
});
}
答案 1 :(得分:1)
第二,你的问题对我来说真是一个挑战。但我想我找到了 解决方案:
var columnsCollection = new Array();
var columnsObjectsNumber = new Array();
reorder();
function reorder() {
$(".info-blocks-container").find("DIV[id^='col']").each(function()
{
var tmp = $(this).children();
//Store the numbers of contained children
columnsObjectsNumber.push($(tmp).size());
$(tmp).each(function()
{
//transfers current child object to our global store place
columnsCollection.push($(this));
//and removed it
$(this).remove();
});
});
var restartIndex = 0;
$(".info-blocks-container").find("DIV[id^='col']").each(function()
{
//Contains the random generated number
var x;
//Contains the current object with Id 'col..'
var temp = $(this);
for (var i = 0; i < columnsObjectsNumber[restartIndex]; i++)
{
/*
Generates a random number.
The maximum limit is the current length from our global store place
*/
x = Math.floor(Math.random() * columnsCollection.length);
//Appends the object to the current object with Id 'col..'
$(temp).append(columnsCollection[x]);
//Removes the appended element from global store place
columnsCollection.splice(x,1);
}
restartIndex++;
});
}
它看起来并不专业,但它确实有效。希望这是你要求的......