首页 > 代码库 > 瀑布流
瀑布流
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>瀑布流</title> <style> *{margin: 0;padding: 0;} ul{list-style:none;} ul li{width:300px;border:1px solid #CCC;padding:10px;position:absolute;transition:all 0.4s;} ul li h3{text-align:center;color:green;line-height:40px;} ul li img{width:300px;} </style></head><body> <ul> <li><img src="http://www.mamicode.com/images/1.jpg" ><h3>1</h3></li> <li><img src="http://www.mamicode.com/images/2.jpg" ><h3>2</h3></li> <li><img src="http://www.mamicode.com/images/3.jpg" ><h3>3</h3></li> <li><img src="http://www.mamicode.com/images/4.jpg" ><h3>4</h3></li> <li><img src="http://www.mamicode.com/images/5.jpg" ><h3>5</h3></li> <li><img src="http://www.mamicode.com/images/6.jpg" ><h3>9527</h3></li> <li><img src="http://www.mamicode.com/images/7.jpg" ><h3>9527</h3></li> <li><img src="http://www.mamicode.com/images/8.jpg" ><h3>9527</h3></li> <li><img src="http://www.mamicode.com/images/9.jpg" ><h3>9527</h3></li> <li><img src="http://www.mamicode.com/images/10.jpg" ><h3>9527</h3></li> <li><img src="http://www.mamicode.com/images/11.jpg" ><h3>9527</h3></li> <li><img src="http://www.mamicode.com/images/12.jpg" ><h3>9527</h3></li> <li><img src="http://www.mamicode.com/images/13.jpg" ><h3>9527</h3></li> <li><img src="http://www.mamicode.com/images/14.png" ><h3>9527</h3></li> <li><img src="http://www.mamicode.com/images/15.jpg" ><h3>9527</h3></li> <li><img src="http://www.mamicode.com/images/16.png" ><h3>9527</h3></li> <li><img src="http://www.mamicode.com/images/1.jpg" ><h3>1</h3></li> <li><img src="http://www.mamicode.com/images/2.jpg" ><h3>2</h3></li> <li><img src="http://www.mamicode.com/images/3.jpg" ><h3>3</h3></li> <li><img src="http://www.mamicode.com/images/4.jpg" ><h3>4</h3></li> <li><img src="http://www.mamicode.com/images/5.jpg" ><h3>5</h3></li> <li><img src="http://www.mamicode.com/images/6.jpg" ><h3>9527</h3></li> <li><img src="http://www.mamicode.com/images/7.jpg" ><h3>9527</h3></li> <li><img src="http://www.mamicode.com/images/8.jpg" ><h3>9527</h3></li> <li><img src="http://www.mamicode.com/images/9.jpg" ><h3>9527</h3></li> <li><img src="http://www.mamicode.com/images/10.jpg" ><h3>9527</h3></li> <li><img src="http://www.mamicode.com/images/11.jpg" ><h3>9527</h3></li> <li><img src="http://www.mamicode.com/images/12.jpg" ><h3>9527</h3></li> <li><img src="http://www.mamicode.com/images/13.jpg" ><h3>9527</h3></li> <li><img src="http://www.mamicode.com/images/14.png" ><h3>9527</h3></li> <li><img src="http://www.mamicode.com/images/15.jpg" ><h3>9527</h3></li> <li><img src="http://www.mamicode.com/images/16.png" ><h3>9527</h3></li> </ul> <script src="http://www.mamicode.com/jquery-1.8.3/jquery.min.js"></script> <script> function run(){ // 获取所有的 li var liObj = $(‘li‘); // 默认的 margin 容器的边距 var margin = 10; // 每一个 li 标签 要占的宽度。 var liWidth = liObj[0].offsetWidth+margin; // 一排可以显示 li 的 数量。 var num = parseInt(document.documentElement.offsetWidth/liWidth); // 定义一个空数组 来 装每个 li 的 高度。 var liH = []; for(var i=0;i<liObj.length;i++){ if(i<num){ // 第一排的 li liObj.eq(i).css({top:‘0‘,left:i*liWidth}) liH[i] = liObj[i].offsetHeight; }else{ // 谁的高度最小。 var minH = Math.min.apply(null,liH); // 我要的是最小高度的位置。 var minKey = getKey(liH,minH); // 摆放 非 第一排的 li liObj.eq(i).css({top:minH+margin,left:minKey*liWidth}); // 更新 上以次 存 高度的数组。 liH[minKey] += liObj[i].offsetHeight+margin; } // 给每一个 h3 添加编号。 $(‘h3‘).eq(i).html(‘编号：‘+i); } } // 等待 所有的 dom 加载完成 // 因为 我们要等图片加载完成，才能获取图片的大小 window.onload = function(){ run(); } // 通过数组的 value 获取 key function getKey(obj,value){ for(var i=0;i<obj.length;i++){ if(value=http://www.mamicode.com/=obj[i]){return i}>
瀑布流
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。