列表项布局

效果图：

    <p>float</p>
	<div class="float-list">
		<div class="list-item float-item">第一项</div>
		<div class="list-item float-item">第二项<br>第二项</div>
		<div class="list-item float-item">第三项</div>
		<div class="list-item float-item">第四项</div>
		<div class="list-item float-item">第五项</div>
		<div class="list-item float-item">第六项</div>
	</div>

	<p>flex</p>
	<div class="flex-list">
		<div class="list-item flex-item">第一项</div>
		<div class="list-item flex-item">第二项<br>第二项</div>
		<div class="list-item flex-item">第三项</div>
		<div class="list-item flex-item">第四项</div>
		<div class="list-item flex-item">第五项</div>
		<div class="list-item flex-item">第六项</div>
	</div>

js：

<script type="text/javascript">
	(function(){
		let wd=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
		c=parseInt(wd/(wd*0.25+12)),
		el=document.getElementsByClassName('float-item');
		for(let i=0;i<el.length;i++){
			let ind=i%c
			if(ind===0){
				el[i].className=el[i].className+' c'
			}
		}
	})()
</script>

css：

<style type="text/css">
	.list-item{
		width: 25%;
		border:1px solid #ddd;
		margin: 5px;
	}
	.float-list{
		*zoom:1;
	}
	.float-list:after{
		content:"";
		display: block;
		clear: both
	}
	.float-item{
		float:left;
	}
	.flex-list{
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.c{
		clear:left;
	}
</style>