如何在跨行随机HTML元素位置时保持每行3个的布局？

你的代码直接在所有.col-md元素间随机调整位置，会把原本属于不同row的列互相插入，导致row内的列数不再固定为3，自然打乱了布局。要实现跨行随机但保持每行3张的结构，得先把所有列元素整体打乱，再重新分配到两个row中。

具体实现方案 #

1. 提取所有.col-md元素为数组，用Fisher-Yates洗牌算法打乱顺序（比你原有的随机交换方式更高效、随机分布更均匀）
2. 清空两个row的现有内容
3. 将打乱后的前3个列元素放回第一个row，后3个放回第二个row

修改后的JavaScript代码：

$(function (){
    // 收集所有col-md元素到数组
    var cols = $(".col-md").toArray();
    
    // Fisher-Yates洗牌算法打乱数组
    for (let i = cols.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [cols[i], cols[j]] = [cols[j], cols[i]];
    }
    
    // 获取两个row容器
    const rows = $(".row");
    
    // 清空row并重新分配列元素
    rows.eq(0).empty().append(cols.slice(0, 3));
    rows.eq(1).empty().append(cols.slice(3, 6));
});

额外提示 #

检查你的原HTML结构，第一个<div class="row">缺少闭合标签，应该在第三个.col-md的闭合标签之后添加</div>，否则HTML结构不合法也会导致渲染异常。

内容的提问来源于stack exchange，提问作者London-35