UseStudio.CloudFront/controls/pc/Waterfall/waterfall.js

// 吴春杰  傅昊
Namespace.register("U.Control.wafa");   //注册命名空间
//window.onload = function () {
//   U.Control.wafa.start();
//}
U.Control.wafa.start = function () {    //页面加载第一个函数，生成文本框选项 调用函数U.Control.wafa.start() 返回参数
    var startA = $$("div", { "style": { "cssText": "display:inline-block;"} }); //创建名为startA的div包含列宽选项
    var startB = $$("input", { "style": { "cssText": "width:120px;height:26px;float:left;" }, placeholder: "列数" }, startA); //创建div，定义列数
    var startC = $$("input", { "style": { "cssText": "width:120px;height:26px;float:left;" }, placeholder: "宽度" }, startA); //创建div，定义宽度
    var Select = $$("select", { "style": { "cssText": "width:120px;height:30px;float:left;" }, className: "SeWidth" }, startA); //创建div，定义宽度的单位
    $$("option", { "style": { "cssText": "width:120px;height:30px;float:left;" }, innerHTML: "px" }, Select);
    $$("option", { "style": { "cssText": "width:120px;height:30px;float:left;" }, innerHTML: "%" }, Select);
    var startD = $$("button", { "style": { "cssText": "width:120px;height:30px;float:left;" }, innerHTML: "确定", className: "SundD" }, startA);//创建button绑定点击事件
//    startC.onclick = function () {
//        alert(1);
    //    }
    startD.onclick = function () {                                      //创建点击函数
        if (startB.value > 7 || startB.value < 1) { alert("列数不能大于7或者小于1"); return; }
        if ($(".SeWidth")[0].value == "px") { if (startC.value > (document.body.offsetWidth /(parseInt(startB.value)+1)) || startC.value < (document.body.offsetWidth / startC.value)) { alert("宽度不符，请重新设置"); return; } }
        if ($(".SeWidth")[0].value == "%") {
        if (startC.value > parseInt((Math.round(1 / startB.value * 10000) / 100.00 + "%"))-2 ||         //判断百分比宽度是否符合页面设置
        startC.value < parseInt((Math.round(1 / startB.value * 10000) / 100.00 + "%"))/3) { alert("宽度不符，请重新设置"); return; } }
    U.Control.wafa.ii(parseInt(startB.value), parseInt(startC.value)); //判断高度列数，并触发U.Control.wafa.ii（）;
    }
    return startA;
}
U.Control.wafa.ii = function (list, Width) {        //先创建列DIV，判断并创建子DIV添加到列DIV中
    if ($("#oDivID")[0]) { $("#oDivID")[0].parentNode.removeChild($("#oDivID")[0]) }
    var Boxdiv = $$("div", { "style": { "cssText": "position:relative;margin-top:20px;"},id:"oDivID" }, $("body")[0]);
    U.Control.wafa.init(list, Width, Boxdiv);  //
}
U.Control.wafa.Minimum=0;       //获取最小高度
U.Control.wafa.init = function (list, fixedWidth, Boxdiv) {  // 调用函数U.Control.wafa.init() 返回div
    // var fixedWidth = 200;  //固定宽度
    // var list = 4;          //需要的列数
    var ranH = (function () { //随机高度
        return parseInt(Math.random() * 300 + 50);
    });
    var arrdiv = [];  //装载所有div
    var mixH = {};    //装载列数div 的最小height
    var row = 1;      //获取排数
    for (var i = 0; i < list; i++) {  //循环需要的多少列数
        var listdiv = $$("div", { "style": { "cssText": "float:left;min-height:10px;margin:0 0 0 20px;", "width": fixedWidth + $(".SeWidth")[0].value }, className: "listcolumns" }, Boxdiv);
    }

    for (var a = 0; a < 10; a++) { //要循环出多少个数据
        var ndiv = $$("div", { "style": { "cssText": "font-size:30px;text-align:center;border:1px solid #f0f0f0;box-shadow:0 0 2px #666;margin-bottom:20px;position:relative;width:100%;", "height": ranH() + "px" }, innerHTML: a + 1, className: "DateC" });
        var adiv=$$("")
        arrdiv[a] = ndiv;
    }

    for (var b = 0; b < list; b++) {  //one row number
        $(".listcolumns")[b].appendChild(arrdiv[b]);
        mixH[b] = arrdiv[b].parentNode.offsetHeight;
    }
    U.Control.wafa.ggy(list, mixH);  // 获取当前列数的最小高度

    var $a; //判断当前最小高度的位置;
    for (var c = 0; c < arrdiv.length; c++) {   //循环所有div的长度
        if (c % list == 0 && c != 0) { row++; }    //求当前的模
        if (c < (row * list) && c >= (row - 1) * list) {
            if (arrdiv[c].parentNode.children[row]) { continue; }
            if (parseInt(arrdiv[c].parentNode.offsetHeight) == U.Control.wafa.Minimum) {//判断当前行高是否为列高中最低的
                var LmixH = arrdiv[c].parentNode;  //获取当前行数高度最低的div
                for (var d = 0; d < arrdiv.length; d++) {
                    if (d > (list * row - 1) && d < list * (row + 1)) {
                        if (list * row == d) {
                            LmixH.appendChild(arrdiv[d]);
                            if (d == arrdiv.length - 1) { return; }
                            for (var i = 0; i < LmixH.parentNode.children.length; i++) {
                                if (LmixH.parentNode.children[i] == LmixH) {
                                    $a = i;
                                    mixH[$a] = LmixH.offsetHeight;
                                }
                            }
                        }
                        else {
                            if ($(".listcolumns")[$a].children[row]) { $a++; }
                            else { $a = 0; }
                            if ($a == list) { $a = 0; }
                            $(".listcolumns")[$a].appendChild(arrdiv[d]);
                            mixH[$a] = $(".listcolumns")[$a].offsetHeight;

                        }
                    }
                }
                U.Control.wafa.ggy(list, mixH);  // 获取当前列数的最小高度
            }
        }
    }
}


U.Control.wafa.ggy = function (list, mixH) {  //获取mix Height
    var arrMixH = []; //装载2个mixHeight
    var MixHHH = 0;   //获取最小高度判断
    for (var i = 0; i < list; i++) {
        if (i == (list - 1)) {
            if (list == 1) {
                U.Control.wafa.Minimum = mixH[i]; //更新最小列高
            }
            continue;
        }
        arrMixH[i] = parseInt(mixH[i]); //给每个parseInt判断最小高度
        arrMixH[i + 1] = parseInt(mixH[i + 1]);
        MixHHH = Math.min(
        arrMixH[i], arrMixH[i + 1]
    );
        if (U.Control.wafa.Minimum < MixHHH) {
            if (i == 0) {
                U.Control.wafa.Minimum = MixHHH;
            }
        }
        else {
            U.Control.wafa.Minimum = MixHHH;
        }
    }

}