zoukankan      html  css  js  c++  java
  • 【原创】javascript原生实现图片瀑布流

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    	<meta charset="UTF-8">
    	<title>瀑布流</title>
    	<style>
    		*{
    			padding: 0;
    			margin: 0;
    		}
    		#main{
    			position: relative;
    		}
    		.box{
    			float: left;
    			padding: 15px 0 0 15px;
    		}
    		.pic{
    			padding:10px;
    			border: 1px solid #666;
    			border-radius: 3px;
    			box-shadow: 0 0  3px #777;
    		}
    		.pic img{
    			height: auto;
    			 150px;
    		}
    
    	</style>
    </head>
    <body>
    	<div id="main">
    		<div class="box">
    			<div class="pic"><img src="img/1.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/2.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/3.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/4.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/5.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/6.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/7.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/8.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/9.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/10.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/11.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/12.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/13.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/14.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/15.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/16.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/17.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/18.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/19.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/20.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/21.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/22.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/23.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/24.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/25.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/26.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/27.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/28.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/30.jpg" alt=""></div>
    		</div>
    		<div class="box">
    			<div class="pic"><img src="img/31.jpg" alt=""></div>
    		</div>
    	</div>
    	<script>
    		window.onload=function(){
    			waterfall('main','box');
    		}
    
    		function waterfall(id,clsN){
    			var oid=document.getElementById(id);
    			var cls=getByClassName(oid,clsN);
    			var boxW=cls[0].offsetWidth;
    			var num=Math.floor(document.documentElement.clientWidth/boxW);
    			oid.style.cssText=""+num*boxW+"px ; margin:0 auto;";
    			var ar=[];
    			for(var i=0; i<cls.length;i++){
    				if(i<num){
    					ar[i]=cls[i].offsetHeight;
    				}else{
    					var minH=Math.min.apply(null,ar);
    					var minIndex=getminHIndex(ar,minH);
    					cls[i].style.position="absolute";
    					cls[i].style.top=minH+"px";
    					cls[i].style.left=cls[minIndex].offsetLeft+"px";
    					ar[minIndex]+=cls[i].offsetHeight;
    				}
    			}
    
    		}
    		function getminHIndex(arr,minH){
        		for(var i in arr){
           			 if(arr[i]==minH){
                		return i;
           			 }
        		}
    		}
           function getByClassName(parent,classname){ var arr=new Array(); var oparent=parent.getElementsByTagName('*'); for(var i=0;i<oparent.length;i++){ if(oparent[i].className==classname){ arr.push(oparent[i]); } } return arr; } </script> </body> </html>

      

  • 相关阅读:
    设计模式学习笔记之一:策略模式
    向上转型和向下转型
    html readonly和disabled的区别
    如何自定义JSR-303标准的validator
    vue 组件属性props,特性驼峰命名,连接线使用
    laydate中设置动态改变max与min值的方法
    浅谈JS中 reduce() 的用法
    jq 实时监听input输入框的变化
    npm install --save 和 npm install -d的区别
    vue中html、js、vue文件之间的简单引用与关系
  • 原文地址:https://www.cnblogs.com/pm-dongjian/p/5525424.html
Copyright © 2011-2022 走看看