Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,
body,
ul,
li,
p,
h1 {
margin: 0;
padding: 0;
}
body {
margin-top: 10px;
min-width:1000px;
}
-sharpwrp .datamore {
position: relative;
margin: 0 auto;
}
li {
list-style: none;
margin-right:10px;
margin-bottom:10px;
}
-sharpwrp .datamore>li {
width: 260px;
border: 1px solid -sharpccc;
padding: 10px;
line-height: 0;
position: absolute;
}
-sharpwrp .datamore>li img {
width: 260px;
display: block;
}
-sharpwrp .datamore>li h1 {
line-height: 30px;
font-size: 14px;
border-bottom: 1px solid -sharpccc;
}
-sharpwrp .datamore>li p {
font-size: 12px;
line-height: 20px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="wrp">
<ul class="datamore">
<li>
<img src="http://7xr23p.com1.z0.glb.clouddn.com/20185.jpg" alt="">
<h1>"" </h1>
.
</li>
<li>
<img src="http://7xr23p.com1.z0.glb.clouddn.com/20186.jpg" alt="">
<h1></h1>
</li>
<li>
<img src="http://7xr23p.com1.z0.glb.clouddn.com/20187.jpg" alt="">
<h1></h1>
429""
</li>
<li>
<img src="http://7xr23p.com1.z0.glb.clouddn.com/20188.jpg" alt="">
<h1></h1>
Anthony Powell10
</li>
<li>
<img src="http://7xr23p.com1.z0.glb.clouddn.com/20189.jpg" alt="">
<h1>"" </h1>
.
</li>
<li>
<img src="http://7xr23p.com1.z0.glb.clouddn.com/20185.jpg" alt="">
<h1>"" </h1>
.
</li>
<li>
<img src="http://7xr23p.com1.z0.glb.clouddn.com/20186.jpg" alt="">
<h1></h1>
</li>
<li>
<img src="http://7xr23p.com1.z0.glb.clouddn.com/20187.jpg" alt="">
<h1></h1>
429""
</li>
<li>
<img src="http://7xr23p.com1.z0.glb.clouddn.com/20188.jpg" alt="">
<h1></h1>
Anthony Powell10
</li>
<li>
<img src="http://7xr23p.com1.z0.glb.clouddn.com/20189.jpg" alt="">
<h1>"" </h1>
.
</li>
</ul>
<div class="ficer"></div>
</div>
<script type="text/javascript">
var owrap = $("-sharpwrp");
var datamore = $(".datamore");
var oli = owrap.find("li");
var arr = [];
var owidth = $(window).width();
var oliwidh = oli.eq(0).outerWidth(true);
var len = Math.floor((owidth / oliwidh));
var omin;
var objinx;
datamore.css({
"width": oliwidh * len
})
for(var i = 0; i < len; iPP) {
arr.push(oli.eq(i).outerHeight(true));
oli.eq(i).css({
"top": 0,
"left": i * oliwidh + "px"
})
}
console.log(arr);
</script>
</body>
</html>
the value of this arr array is not the same as outerHeight (true) and safari under chorme? Why. I don"t quite understand