学习到这个算法是通过一个案例:把一列的div通过按钮点击事件变成3列或者其他的列数
算法封装为函数:
function ColsFlex(allCols,AllNode) {
var boxW=Value,boxH=Value,marginXY=Value;
for(var i=0;i<AllNode.length;i++)
{
//求当前盒子所在的行、列
var row = parseInt(i/allCols);//求行号
var cols = parseInt(i%allCols);
//盒子的定位
var currentBox = AllNode[i];
/*在父标签先设置好relative*/
currentBox.style.position = "absolute";
currentBox.style.left = cols*(boxW+marginXY)+"px";
currentBox.style.top = row*(boxH+marginXY)+"px";
}
}
算法:通过div
块级排序的索引值i
,可求得在给定Cols
情况下,更换位置以后和行列。
row = parseInt( i / Cols)
cols=parseInt(i%Cols)