基本信息
源码名称:jquery AutoSplitList将list元素 按指定列数分组 例子源码
源码大小:1.22KB
文件格式:.js
开发语言:js
更新时间:2014-10-12
   友情提示:(无需注册或充值,赞助后即可获取资源下载链接)

     嘿,亲!知识可是无价之宝呢,但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下,绝对物超所值哦!如有下载和支付问题,请联系我们QQ(微信同号):813200300

本次赞助数额为: 2 元 
   源码介绍

调用实例


<script type="text/javascript">
    $(function () {
        var targetObj = $(".sample4:first");//被分组的对象
        var columnCount = 4;//每行元素数
        var childClassName = "span3";//子元素类名
        AutoSplitList(targetObj, childClassName, columnCount);
    });
</script>




另外一个服务器脚本实现思路如下:

var count = list.count();
for(var i=0;i<count;i =4)
{
            <flowdiv>
              for(var j =0;j<4;j  )
              {
                     if(i j>count) break;
                      <div>
                           ..................................
                       </div>
               }
            <flowdiv>
}


function AutoSplitList(targetObj, childClassName, columnCount) {
        //var targetObj = $(".sample3:first");//被分组的对象
        //var columnCount = 4;//每行元素数
        //var childClassName = "span3";
    var pageCount = parseInt((targetObj.find("."   childClassName).length   columnCount - 1) / columnCount);
    var totalCount = targetObj.find("."   childClassName).length;
        var tmpObj = targetObj;
        //构建row元素
        for (var i = 0; i < pageCount; i  ) {
            tmpObj.after("<div class='"   targetObj.attr("class")   "' id='rowf"   i.toString()   "'><div class='clear'></div></div>");
            tmpObj = $("#rowf"   i.toString());
            tmpObj.css("margin-bottom","15px");
        }
        //归类属性
        targetObj.find("."   childClassName).each(function () {
            var i = $(this).index() / columnCount;
            $(this).attr("to",  parseInt(i).toString());
        });
        //填充数据
        targetObj.find("."   childClassName).each(function () {
            $("#rowf"   $(this).attr("to")   " .clear").before($(this));
        });
        tmpObj.css("margin-bottom", "150px");
        if (totalCount > 0) targetObj.remove();
    }