代码已奉上，求大神借上下间距不一致问题
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"> <!-- <script type="text/javascript" src="js/index.js"></script> --> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> <script type="text/javascript" src="js/indexjq.js"></script> </head> <body> <div id="content"> <div> <img src="images/1.png"> <a href="http://www.imooc.com" target="_blank">第一怪 竹筒当烟袋</a> </div> <div> <img src="images/2.png"> <a href="http://www.imooc.com" target="_blank">第二怪 草帽当锅盖</a> </div> <div> <img src="images/3.png"> <a href="http://www.imooc.com" target="_blank">第三怪 这边下雨那边晒</a> </div> <div> <img src="images/4.png"> <a href="http://www.imooc.com" target="_blank">第四怪 四季服装同穿戴</a> </div> <div> <img src="images/5.png"> <a href="http://www.imooc.com" target="_blank">第五怪 火车没有汽车快</a> </div> <div> <img src="images/6.png"> <a href="http://www.imooc.com" target="_blank">第六怪 火车不通国内通国外</a> </div> <div> <img src="images/7.png"> <a href="http://www.imooc.com" target="_blank">第七怪 老奶爬山比猴快</a> </div> <div> <img src="images/8.png"> <a href="http://www.imooc.com" target="_blank">第八怪 鞋子后面多一块</a> </div> <div> <img src="images/9.png"> <a href="http://www.imooc.com" target="_blank">第九怪 脚趾四季露在外</a> </div> <div> <img src="images/10.png"> <a href="http://www.imooc.com" target="_blank">第十怪 鸡蛋拴着卖</a> </div> <div> <img src="images/11.png"> <a href="http://www.imooc.com" target="_blank">第十一怪 粑粑叫饵块</a> </div> <div> <img src="images/12.png"> <a href="http://www.imooc.com" target="_blank">第十二怪 花生蚕豆数着卖</a> </div> <div> <img src="images/13.png"> <a href="http://www.imooc.com" target="_blank">第十三怪 三个蚊子一盘菜</a> </div> <div> <img src="images/14.png"> <a href="http://www.imooc.com" target="_blank">第十四怪 四个老鼠一麻袋</a> </div> <div> <img src="images/15.png"> <a href="http://www.imooc.com" target="_blank">第十五怪 树上松毛扭着卖</a> </div> <div> <img src="images/16.png"> <a href="http://www.imooc.com" target="_blank">第十六怪 姑娘叫老太</a> </div> <div> <img src="images/17.png"> <a href="http://www.imooc.com" target="_blank">第十七怪 小和尚可以谈恋爱</a> </div> <div> <img src="images/18.png"> <a href="http://www.imooc.com" target="_blank">第十八怪 背着娃娃谈恋爱</a> </div> </div> </body> </html>
$(function(){
var cont=$('#content');
var boxes=$('#content div');
xie(cont,boxes);
})
/*获取最小高度盒子的列索引*/
function getIndex(minHeight,everyHeight){
for(var index in everyHeight){
if (everyHeight[index]==minHeight){
return index;
}
}
}
function xie(cont,boxes){
/*计算窗口一行最多放几个盒子*/
var boxWidth=boxes.eq(0).width()+20;
var windowWidth=$(window).width();
var colsNumber=Math.floor(windowWidth/boxWidth);
/*根据最多盒子数算content的width*/
cont.css('width',colsNumber*boxWidth);
/*定义一个数组并存储每一列高度*/
var everyHeight=new Array();
for(var i=0;i<boxes.length;i++){
if(i<colsNumber){
everyHeight[i]=boxes.eq(i).height()+20;
}
else{
var minHeight=Math.min.apply(null,everyHeight);
var minIndex=getIndex(minHeight,everyHeight);
var minLeft=boxes.eq(minIndex).position().left;
boxes.eq(i).css({
'position':'absolute',
'top':minHeight,
'left':minLeft,
'opacity':'0'
}).stop().animate({'opacity':'1'},1000)
everyHeight[minIndex]+=boxes.eq(minIndex).height()+20;
}
}
}@charset "utf8";
*{
margin:0;
padding:0;
border:none;
}
body{
background:#ddd;
}
a{
text-decoration: none;
color:black;
}
a:hover{
color:#999;
}
#content{
position:relative;
margin:0 auto;
width:auto;
height:auto;
}
#content div{
float:left;
width:200px;
margin:10px;
border-radius: 10px;
box-sizing: border-box;
background-color: white;
}
#content div img{
width:100%;
}
#content div a{
font-size:14px;
font-weight:bold;
font-family:微软雅黑;
display:block;
line-height:40px;
text-align:center;
}57
收起
正在回答
2回答
你好，js的37号，更新最小高度，应该是：
everyHeight[minIndex]+=boxes.eq(i).height()+20;
祝学习愉快~
花式宋人头__普拉斯
2017-09-11 21:21:40
就像这种情况，跪求大神
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星