<!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!}</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]-->
<link rel="stylesheet" href="plugins/layui/css/layui.css" />
<style>
body,html{
background: #f2f2f2;
}
.full-container{
padding: 15px;
}
.panel-card{
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;
visibility:hidden;
}
.pad15>*{
padding: 7.5px;
}
.img-info{
height: 100%;
}
</style>
</head>
<body>
<div class="full-container">
<ul class="layui-timeline panel-card">
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月18日</h3>
<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>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月16日</h3>
<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>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">无图片过去</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>
</div>
</li>
</ul>
</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;//一行图片数
var imgWidhtHeight = parseInt(imgListWidth/size)
$(".img-item").css({"width":imgWidhtHeight+"px","height":imgWidhtHeight+"px"})
if(!$(".img-item").is(":visible")){
$(".img-item").show();
if($(".full-container")[0].scrollHeight > document.documentElement.clientHeight){
var imgWidhtHeight = parseInt($(".img-list").width()/size)
$(".img-item").css({"width":imgWidhtHeight+"px","height":imgWidhtHeight+"px"})
}
$(".img-item").css('visibility','visible')
}
})
window.onload = function(){
var resize = new Event('resize');
window.dispatchEvent(resize);
}
</script>
</body>
</html>
