请教怎么实现ul中一列li，分成3列不等高，上下排列紧密的结构

请问如何实现ul中一列li，分成3列不等高，上下排列紧密的结构
想要实现的效果如http://mall.cmbchina.com/GroupBuy/GroupBuy-14.htm所示
我现在只能实现下图效果
请教怎么实现ul中一列li，分成3列不等高，上下排列紧密的结构

同一列之间有空白间距，不知道怎么样才能去掉
这是我现在的代码



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

.box{ width:960px; margin:0 auto; list-style-type:none;}

.box li{border:1px solid black; margin:3px; float:left; width:312px;}

</style>

<title>无标题文档</title>

</head>


<body>

<ul class="box">

    <li>111<br/><br/><br/><br/><br/><br/></li>

    <li>111</li>

    <li>111</li>

    <li>111<br/><br/></li>

    <li>111</li>

    <li>111<br/><br/><br/><br/></li>

    <li>111</li>

    <li>111</li>

</ul>

</body>

</html>

------解决方案--------------------
这是明显的瀑布流布局，无论如何你都要去计算三栏的当前高度，找出最小值，然后动态加载，最好的方式就是三栏布局，而不是利用一个ul列表，定位也是不靠谱的

如下参考，你可以尝试动态添加li,而真正的应用中，你可能会去获取数据列表，然后动态加载出布局



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

.warp{width:600px;margin:0 auto;background:#ccc;}

ul{margin:0;padding:0;list-style:none;}

.cf:after{content:'';display:block;clear:both;}

.cf{zoom:1;}

.list ul{float:left; width:200px;}

.list li{float:left;width:176px;margin-right:20px;border:solid 2px red;margin-bottom:10px; display:inline; vertical-align:top;}

.opea{text-align:center;}

</style>

<script>

window.onload=function()

{

	var oBtn=document.getElementById('btn');

	var oText=document.getElementById('text');

	var uLeft=document.getElementById('left');

	var uCenter=document.getElementById('center');

	var uRight=document.getElementById('right');

	oBtn.onclick=function(){

		var iH=parseFloat(oText.value)
------解决方案--------------------
0;

		if(iH>0)

		{

			var minUl=getMinHeightUl();

			var li=document.createElement('li');

			li.style.height=iH+'px';

			minUl.appendChild(li);

		}

	}

}

function getMinHeightUl()

{

	var oList=document.getElementById('list');

	var aUl=oList.getElementsByTagName('ul');

	var iCur=Number.MAX_VALUE;

	var oUl=null;

	for(var i=0;i<aUl.length;i++)

	{

		if(iCur>aUl[i].offsetHeight)

		{

			iCur=aUl[i].offsetHeight;

			oUl=aUl[i];

		}

	}

	return oUl;

}

</script>

<title>无标题文档</title>

</head>


<body>

<div class="warp">

	<div class="opea">

    	请输入高度：<input type="text" value="20" id="text"/>

        <input type="button" id="btn"  value="动态添加元素"/>

    </div>

    <div class="list cf" id="list">

        <ul></ul>

        <ul></ul>

        <ul></ul>

    </div>

</div>

</body>

</html>

请教怎么实现ul中一列li，分成3列不等高，上下排列紧密的结构

相关推荐