您好，能帮我看下代码哪里有问题吗，图片叠加了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0 auto;
outline: none;
border: 0;
}
body {
background: #CCCCCC;
}
big {
position: relative;
}
.big-sm {
width: 280px;
height: auto;
display: block;
float: left;
box-sizing: border-box;
border-radius: 5px;
background: white;
margin: 10px;
padding: 10px;
}
.big-sm img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div id="big">
<a href="#" class="big-sm">
<img src="images/1.png" />
</a>
<a href="#" class="big-sm">
<img src="images/2.png" />
</a>
<a href="#" class="big-sm">
<img src="images/3.png" />
</a>
<a href="#" class="big-sm">
<img src="images/4.png" />
</a>
<a href="#" class="big-sm">
<img src="images/5.png" />
</a>
<a href="#" class="big-sm">
<img src="images/6.png" />
</a>
<a href="#" class="big-sm">
<img src="images/7.png" />
</a>
<a href="#" class="big-sm">
<img src="images/8.png" />
</a>
<a href="#" class="big-sm">
<img src="images/9.png" />
</a>
<a href="#" class="big-sm">
<img src="images/10.png" />
</a>
<a href="#" class="big-sm">
<img src="images/11.png" />
</a>
<a href="#" class="big-sm">
<img src="images/12.png" />
</a>
<a href="#" class="big-sm">
<img src="images/13.png" />
</a>
<a href="#" class="big-sm">
<img src="images/14.png" />
</a>
<a href="#" class="big-sm">
<img src="images/15.png" />
</a>
<a href="#" class="big-sm">
<img src="images/16.png" />
</a>
<a href="#" class="big-sm">
<img src="images/17.png" />
</a>
<a href="#" class="big-sm">
<img src="images/18.png" />
</a>
</div>
<script type="text/javascript" src="../jquery-1.11.0.js"></script>
<script>
$(document).ready(function(event) {
var big = $('#big');
var a = big.children('.big-sm');
warp(big, a);
})
function warp(big, a) {
var aWidth = a.width() + 40;
var cols = Math.floor($(window).width() / aWidth);
var bigWidth = cols * aWidth;
big.width(bigWidth);
var everyHeight = new Array();
for(var i = 0; i < a.length; i++) {
if(i < cols) {
everyHeight[i] = a.eq(i).height() + 40;
} else {
var minHeight = Math.min.apply(null, everyHeight);
var minIndex = minindex(minHeight, everyHeight);
var leftValue = a.eq(minIndex).position().left;
a.eq(i).css({
'position': 'absolute',
'top': minHeight,
'left': leftValue
})
everyHeight[minIndex] += a.eq(i).height() + 40;
console.log(everyHeight);
console.log(a.eq(i).height())
}
}
}
function minindex(minHeight, everyHeight) {
for(index in everyHeight) {
if(everyHeight[index] == minHeight) {
return index;
}
}
}
//width()方法只能得到内容的宽度
</script>
</body>
</html>
正在回答
图片重叠的原因
原因一：jq库不一样会造成不一样的结果，这可能是图片叠加的原因
原因二：浏览器版本的问题，同学们可以尝试更换浏览器
原因三：window.onload和ready的区别，可以使用window.onload
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星