zoukankan      html  css  js  c++  java
  • 瀑布流

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>瀑布流</title>
    	<style>
    		*{margin: 0;padding: 0;}	
    		ul{list-style:none;}
    		ul li{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{300px;}	
    	</style>
    </head>
    <body>
    	<ul>
    		<li><img src="images/1.jpg" alt=""><h3>1</h3></li>
    		<li><img src="images/2.jpg" alt=""><h3>2</h3></li>
    		<li><img src="images/3.jpg" alt=""><h3>3</h3></li>
    		<li><img src="images/4.jpg" alt=""><h3>4</h3></li>
    		<li><img src="images/5.jpg" alt=""><h3>5</h3></li>
    		<li><img src="images/6.jpg" alt=""><h3>9527</h3></li>
    		<li><img src="images/7.jpg" alt=""><h3>9527</h3></li>
    		<li><img src="images/8.jpg" alt=""><h3>9527</h3></li>
    		<li><img src="images/9.jpg" alt=""><h3>9527</h3></li>
    		<li><img src="images/10.jpg" alt=""><h3>9527</h3></li>
    		<li><img src="images/11.jpg" alt=""><h3>9527</h3></li>
    		<li><img src="images/12.jpg" alt=""><h3>9527</h3></li>
    		<li><img src="images/13.jpg" alt=""><h3>9527</h3></li>
    		<li><img src="images/14.png" alt=""><h3>9527</h3></li>
    		<li><img src="images/15.jpg" alt=""><h3>9527</h3></li>
    		<li><img src="images/16.png" alt=""><h3>9527</h3></li>
    		<li><img src="images/1.jpg" alt=""><h3>1</h3></li>
    		<li><img src="images/2.jpg" alt=""><h3>2</h3></li>
    		<li><img src="images/3.jpg" alt=""><h3>3</h3></li>
    		<li><img src="images/4.jpg" alt=""><h3>4</h3></li>
    		<li><img src="images/5.jpg" alt=""><h3>5</h3></li>
    		<li><img src="images/6.jpg" alt=""><h3>9527</h3></li>
    		<li><img src="images/7.jpg" alt=""><h3>9527</h3></li>
    		<li><img src="images/8.jpg" alt=""><h3>9527</h3></li>
    		<li><img src="images/9.jpg" alt=""><h3>9527</h3></li>
    		<li><img src="images/10.jpg" alt=""><h3>9527</h3></li>
    		<li><img src="images/11.jpg" alt=""><h3>9527</h3></li>
    		<li><img src="images/12.jpg" alt=""><h3>9527</h3></li>
    		<li><img src="images/13.jpg" alt=""><h3>9527</h3></li>
    		<li><img src="images/14.png" alt=""><h3>9527</h3></li>
    		<li><img src="images/15.jpg" alt=""><h3>9527</h3></li>
    		<li><img src="images/16.png" alt=""><h3>9527</h3></li>
    	</ul>	
    
    	<script src="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==obj[i]){return i}
    			}
    		}
    		// alert(liObj);
    
    		// 浏览器大小 改变时 就会 执行这个函数。
    		window.onresize = function(){
    			run();
    		}
    
    
    	</script>
    </body>
    </html>
    

      

  • 相关阅读:
    C++ 归纳复习常规篇
    小技巧:linux启动nginx服务异常 systemctl daemon-reload
    每日日报
    每日日报
    每日日报
    每日日报
    每日日报
    每日日报
    Migration in EF 6 Code-First
    国外.net资源学习网站
  • 原文地址:https://www.cnblogs.com/-qiang/p/5848213.html
Copyright © 2011-2022 走看看