3-5使用Jquery完成定位布局
照老师视频里写的，帮我看看哪里出错了。代码如下
html代码
<!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/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="wrap">
<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>
css代码
/* 标签重定义 */
* {
margin: 0;
padding: 0;
border: none;
}
body {
background: #ddd;
}
img {
border: none;
}
a {
text-decoration: none;
color: #444;
}
a:hover {
color: #999;
}
/* wrap */
#wrap {
position: relative;
width: auto;
height: auto;
margin: 0 auto;
}
#wrap > div {
float: left;
box-sizing: border-box;
width: 280px;
height: auto;
margin: 10px;
padding: 10px;
border-radius: 5px;
background: #fff;
}
#wrap > div > img {
width: 260px;
margin: 0 auto;
}
#wrap > div > a {
display: block;
font-size: 18px;
font-weight: bold;
line-height: 40px;
text-align: center;
}
script.js代码
// 瀑布流主函数
var waterfall = function(wrap, boxes){
//获得屏幕可显示的列数
//获取盒子宽度
var boxWidth = boxes.eq(0).width() + 40;
//获取视口的宽度
var windowWidth = $(window).width();
//计算可视页面宽度内可显示的列数
var colsNumber = Math.floor(windowWidth / boxWidth);
//设置容器的宽度
wrap.width(boxWidth * colsNumber);
//定义一个数组存储每一列的高度
var everyHeight = new Array();
for (var i = 0; i < boxes.length; i++) {
if (i < colsNumber) {
everyHeight[i] = boxes.eq(i).height + 40;
}else {
var minHeight = Math.min.apply(null, everyHeight); //获得最小的列的高度
var minIndex = getIndex(minHeight, everyHeight); //获得最小列的索引
// var leftValue = boxes.eq(minIndex).position().left; //获得最小的列距页面左侧的距离
boxes.eq(i).css({
'position' : 'absolute', //设置最小列的定位
'top' : minHeight, //设置最小列的top值
'left' : boxes.eq(minIndex).position().left, //设置最小列的left值
'opacity' : '0'
}).stop().animate({
'opacity' : '1'
},1000);
everyHeight[minIndex] += boxes.eq(i).height() + 40; //更新最小列的高度
};
}
};
// 获取最小列的索引
function getIndex(minHeight, everyHeight) {
for (index in everyHeight) {
if (everyHeight[index] == minHeight) {
return index;
};
};
};
$(document).ready(function(event){
//获得容器以及每一个盒子
var wrap = $('#wrap');
var boxes = $('#wrap').children('div');
//运行瀑布流主函数
waterfall(wrap, boxes);
});
谷歌浏览器控制台提示如下：
正在回答
建议将视频仔细观看一边，并且重新对照视频检查一下代码！
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星