<!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>
原文地址：https://www.cnblogs.com/littleboyck/p/11821790.html
时间： 2024-11-06 11:44:03