Metro 布局排版

Question

项目现在是这样要求的.
有3种方块1*1 1*2 2*2每行4个格子.
由上到下的自动排列.这些方块都是由用户自己上传的.
所以没有任何规律性.
前端用脚本处理.
想了几天也没有一个较好的解决方案.
有人能提供一个思路吗~~跪求

Answer 1

这是我之前写的..
代码很坑爹.(function () {
    $.fn.ListLayout = function () {
        var $global = this;
        var $x = 0, $y = 0, $order = 0;//定义排序计数器
        var $count = 0;
        var $nowCount = 0;
        var $arrObj = [];//定义元素容器
        var $LineObj = [];
        var $layout = [];//定义布局数组
        var $position = [];
        var $raN = 8;//随机器        //排序
        //4个2
        //4//
        $layout[0] = "2|2|2|2";
        $position[0] = "0.0|0.360|180.0|180.360";        //3个2;2个1
        //5
        $layout[1] = "2|2|1|2|1";
        $layout[2] = "2|2|2|1|1";
        $layout[3] = "2|2|1|1|2";
        $layout[4] = "1|2|1|2|2";
        $layout[5] = "1|1|2|2|2";
        $position[1] = "0.0|0.360|180.0|180.180|180.540";
        $position[2] = "0.0|0.360|180.0|180.360|180.540";
        $position[3] = "0.0|0.360|180.0|180.180|180.360";
        $position[4] = "0.0|0.180|0.540|180.0|180.360";
        $position[5] = "0.0|0.180|0.360|180.0|180.360";        //2个2;4个1
        //6
        $layout[6] = "2|2|1|1|1|1";
        $layout[7] = "1|2|1|1|2|1";
        $layout[8] = "1|2|1|2|1|1";
        $layout[9] = "1|2|1|1|1|2";
        $position[6] = "0.0|0.360|180.0|180.180|180.360|180.540";
        $position[7] = "0.0|0.180|0.540|180.0|180.180|180.540";
        $position[8] = "0.0|0.180|0.540|180.0|180.360|180.540";
        $position[9] = "0.0|0.180|0.540|180.0|180.180|180.360";        //1个2;6个1;
        //7
        $layout[13] = "2|1|1|1|1|1|1";
        $layout[14] = "1|2|1|1|1|1|1";
        $layout[15] = "1|1|2|1|1|1|1";
        $position[13] = "0.0|0.360|0.540|180.0|180.180|180.360|180.540";
        $position[14] = "0.0|0.180|0.540|180.0|180.180|180.360|180.540";
        $position[15] = "0.0|0.180|0.360|180.0|180.180|180.360|180.540";        //大方格布局
        //2//
        $layout[19] = "3|3";
        $position[19] = "0.0|0.360";
        //3//
        $layout[20] = "3|2|2";
        $layout[21] = "2|2|3";
        $position[20] = "0.0|0.360|180.360";
        $position[21] = "0.0|180.0|0.360";
        //4//
        $layout[22] = "1|1|2|3";
        $layout[23] = "2|1|1|3";
        $position[22] = "0.0|0.180|180.0|0.360";
        $position[23] = "0.0|180.0|180.180|0.360";        //开始
        StartEach();        function setStyle(_obj, point) {
            if (point.indexOf(".") != -1) {
                var xy = [];
                xy = point.split(".");
                var top = ($y * 360) + (xy[0] - 1 + 1);
                _obj.css({ "top": top + "px", "left": xy[1] + "px" }).removeClass("hidden");
            }
            else {
                _obj.css({ "top": top + "px", "left": (($x % 4) * 180) + "px" });
            }
            if (_obj.hasClass("metro-1")) $x++;
            if (_obj.hasClass("metro-2")) $x += 2;
            if (_obj.hasClass("metro-3")) $x += 4;
            if (($x % 8) == 0) $y += 1;
        }        function startLayout(n) {
            var obj;
            var n = n - 1 + 1;
            var Lay = [];
            var Pos = [];
            Lay = $layout[n].split("|");
            Pos = $position[n].split("|");
            var x = 0;
            while (x < Lay.length) {
                Lay[x] = (Lay[x] - 1 + 1);
                if (Lay[x] == 1) {
                    var y = 0;
                    while (y < $arrObj.length) {
                        if (!$arrObj[y].hasClass("done")) {
                            if ($arrObj[y].hasClass("metro-1")) {
                                $obj = $arrObj[y];
                                $obj.addClass("done");
                                setStyle($obj, Pos[x]);
                                y = $arrObj.length;
                            }
                        }
                        y++;
                    }
                }//1
                if (Lay[x] == 2) {
                    var y = 0;
                    while (y < $arrObj.length) {
                        if (!$arrObj[y].hasClass("done")) {
                            if ($arrObj[y].hasClass("metro-2")) {
                                $obj = $arrObj[y];
                                $obj.addClass("done");
                                setStyle($obj, Pos[x]);
                                y = $arrObj.length;
                            }
                        }
                        y++;
                    }
                }//2
                if (Lay[x] == 3) {
                    var y = 0;
                    while (y < $arrObj.length) {
                        if (!$arrObj[y].hasClass("done")) {
                            if ($arrObj[y].hasClass("metro-3")) {
                                $obj = $arrObj[y];
                                $obj.addClass("done");
                                setStyle($obj, Pos[x]);
                                y = $arrObj.length;
                            }
                        }
                        y++;
                    }
                }//3
                x++;
            }
        }        function elementLayout() {
            var b1 = 0, b2 = 0, b3 = 0;
            var der = $LineObj.length - 1;
            var n = 0;
            while (n <= der) {
                if ($LineObj[n].hasClass("metro-1")) {
                    b1++;
                }
                if ($LineObj[n].hasClass("metro-2")) {
                    b2++;
                }
                if ($LineObj[n].hasClass("metro-3")) {
                    b3++;
                }
                n++;
            }
            _str = (der + 1) + "|" + b1 + "|" + b2 + "|" + b3;
            boxLayout(_str);
        }        function boxLayout(n) {//随机排序
            var str = n;
            var pArm = str.split("|");
            var All = (pArm[0] - 1 + 1);
            var metro1 = (pArm[1] - 1 + 1);
            var metro2 = (pArm[2] - 1 + 1);
            var metro3 = (pArm[3] - 1 + 1);
            if (All == 2) startLayout(19);//2布局
            if ((All == 3) || (All == 4)) {//3\4布局
                if (All == 4) {
                    if (metro3 == 0) startLayout(0);
                    if (metro3 == 1) {
                        if (metro2 == 1) startLayout(layoutRandom(22, 25));
                    }
                }
                if (All == 3) {
                    if (metro2 == 2) startLayout(layoutRandom(20, 21));
                }
            }
            if (All == 5) {
                if (metro3 == 1) startLayout(26);
                if (metro2 == 3) startLayout(layoutRandom(1, 5));
            }
            if (All == 6) {
                startLayout(layoutRandom(6, 12));
            }
            if (All == 7) {
                startLayout(layoutRandom(13, 18));
            }
        }        function layoutRandom(x, y) {
            //x下限 - y上限
            return parseInt(Math.random() * (y - x + 1) + x);
        }        function StartEach() {
            $arrObj = [];
            $count = 0;
            $("p.noLayout", $global).each(function () {
                $arrObj.push($(this));
                var str = $(this).attr("class");
                var NumArr = [];
                NumArr = str.split(" ");
                $count += (NumArr[0] - 1);
                if ($arrObj.length == getByCount()) {
                    whileDoSet();
                }
            });
        }        function getByCount() {
            return $("p.noLayout", $global).size();
        };        function whileDoSet() {
            var n = $count;
            var ind_end = getByCount();
            var ind_x = 0, box = 0;
            $LineObj = [];
            while (ind_end--) {
                obj = $arrObj[ind_x];
                if (box == 8) {
                    elementLayout();
                    if ($count >= 8) {
                        StartEach();
                    }
                    break;
                }
                if ($count >= 8) {
                    if (obj.hasClass("2")) {
                        if ((box == 0) || (box == 2)) {
                            ///
                            if (layoutRandom(0, 10) <= 3) {
                                obj.removeClass("2").removeClass("noLayout").addClass("metro-3").addClass("hidden");
                                $LineObj.push(obj);
                                box += 4;
                            }
                            else {
                                obj.removeClass("2").removeClass("noLayout").addClass("metro-1").addClass("hidden");
                                $LineObj.push(obj);
                                box += 1;
                            }
                            ///
                        }
                        else {
                            obj.removeClass("2").removeClass("noLayout").addClass("metro-1").addClass("hidden");
                            $LineObj.push(obj);
                            box += 1;
                        }
                        //
                    }
                    if (obj.hasClass("3")) {
                        if ((box == 3) || (box == 7)) {
                            ind_x++;
                            continue;
                        }
                        else {
                            obj.removeClass("3").removeClass("noLayout").addClass("metro-2").addClass("hidden");
                            $LineObj.push(obj);
                            box += 2;
                        }
                    }
                }
                else {
                    obj.hide();
                    //if (obj.hasClass("2")) {                    //}
                    //if (obj.hasClass("3")) {                    //}
                }
                ind_x++;
            }
        };
    };
})(jQuery);

Answer 2

css控制：
1. 定义格子的大小
2. 注意用浮动布局其他的动态的加数据就行了。