基本信息
源码名称:jquery AutoSplitList将list元素 按指定列数分组 例子源码
源码大小:1.22KB
文件格式:.js
开发语言:js
更新时间:2014-10-12
友情提示:(无需注册或充值,赞助后即可获取资源下载链接)
嘿,亲!知识可是无价之宝呢,但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下,绝对物超所值哦!如有下载和支付问题,请联系我们QQ(微信同号):78630559
本次赞助数额为: 2 元×
微信扫码支付:2 元
×
请留下您的邮箱,我们将在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();
}