标签：viewport head llb clear tab cal port info --
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <!--user-scalable=no禁止缩放--> <title></title> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <style> *{ margin: 0; padding: 0; } body,html{ background: #f2f2f2; } .full-container{ padding: 15px; } .panel-card{ height: 400px; background: #FFFFFF; } .clearfix:after{ clear: both; } .clearfix:after,.clearfix:before{ display: table; content: ‘‘; } .layui-row:after,.layui-row:before { content: ‘‘; display: block; clear: both } .img-responsive{ display: block;
width: 100%;
height: 100%；
}
.img-item{ float: left; box-sizing: border-box; display: none; } .pad15>*{ padding: 7.5px; } .img-info{ height: 100%; } </style> </head> <body> <div class="full-container"> <div class="panel-card"> <div class="img-list clearfix pad15"> <div class="img-item"> <div class="img-info"> <img src="img/natural1.jpg" class="img-responsive"/> </div> </div> <div class="img-item"> <div class="img-info"> <img src="img/natural1.jpg" class="img-responsive"/> </div> </div> <div class="img-item"> <div class="img-info"> <img src="img/natural1.jpg" class="img-responsive"/> </div> </div> <div class="img-item"> <div class="img-info"> <img src="img/natural1.jpg" class="img-responsive"/> </div> </div> <div class="img-item"> <div class="img-info"> <img src="img/natural1.jpg" class="img-responsive"/> </div> </div> <div class="img-item"> <div class="img-info"> <img src="img/natural1.jpg" class="img-responsive"/> </div> </div> </div> <div class="img-list clearfix pad15"> <div class="img-item"> <div class="img-info"> <img src="img/natural1.jpg" class="img-responsive"/> </div> </div> <div class="img-item"> <div class="img-info"> <img src="img/natural1.jpg" class="img-responsive"/> </div> </div> <div class="img-item"> <div class="img-info"> <img src="img/natural1.jpg" class="img-responsive"/> </div> </div> <div class="img-item"> <div class="img-info"> <img src="img/natural1.jpg" class="img-responsive"/> </div> </div> </div> </div> </div> <script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script> <script> /** * 监听窗口大小变化事件 */ var winResize = function (callback) { $(window).on(‘resize‘,function () { callback(); }); }; winResize(function(){ var imgListWidth = $(".img-list").width() var size = 6;//一行图片数 $(".img-item").css({"width":parseInt(imgListWidth/size)+"px","height":parseInt(imgListWidth/size)+"px"}) if(!$(".img-item").is(":visible")){ $(".img-item").show(); } }) window.onload = function(){ var myEvent = new Event(‘resize‘); window.dispatchEvent(myEvent); } </script> </body> </html>
标签：viewport head llb clear tab cal port info --
原文地址：https://www.cnblogs.com/littleboyck/p/11821790.html
