为了账号安全,请及时绑定邮箱和手机立即绑定
var $boxs=$("#main>div"); 可以等于 var $box=$(".box")不是直接有类选择器么
这节课的主要内容——加载更多的图片。

1.何时加载:最后一张图片的距离父元素顶端位置与盒子高度的一半之和要小于滚动条的长度与可视区页面高度之和 即(offsetTop+盒子高度的一半<scrollTop+clientHeight)
2.怎么加载:json数据交换格式;创造元素并开始嵌套(用到append()方法)
————————————

纠正一下,是appendChild()方法 语法:parent.appendChild(children)

已采纳回答 / 慕桂英4419372
应该是滚轮事件中,获取最后的DIV出问题了
这节课的主要内容——加载更多的图片。

1.何时加载:最后一张图片的距离父元素顶端位置与盒子高度的一半之和要小于滚动条的长度与可视区页面高度之和 即(offsetTop+盒子高度的一半<scrollTop+clientHeight)
2.怎么加载:json数据交换格式;创造元素并开始嵌套(用到append()方法)
全对,嘻嘻
这节课的主要内容——盒子排列。
3个步骤:
1.找到上一行里高度最小的盒子(即空隙最大的地方)
2. 把要排列队列里的第一个的盒子定位到这个空白处(需要两个数值,第一个是上一行最矮盒子的高度【方法:Math.min.apply()】,第二个是上一行最矮盒子的左边距【两种办法:盒子宽*最矮盒子下标;数组里最小盒子的offsetLeft。】)
3. 更新这一列的高度,最矮元素的高,加上当前盒子的高度
非常好的课,三种方式,学会了一种非常有趣的布局,讲解的思路很清晰,方法很明确,点赞!

最新回答 / 心有猛虎_细嗅蔷薇
加载更多数据时,应用到了json,元素创建好后并开始嵌套
这节课的主要内容就是——固定第一行盒子。
共3个步骤:
1.确定列数:以当前的页面宽度,除以一个 box 的宽度,结果取整{Math.floor()}
2.确定 main 容器的宽度:列数(即每行中能容纳box的个数)乘以一个 box 的宽(也可以这样写:oParent.style.width = oBoxW*cols+'px';)
3.定位第一行盒子:将 box 集合作为数组取出,遍历子元素,加入入数组
怎么在问答里提问?

已采纳回答 / 山无夜4114517
符合一次条件就将json的data中的所有图片渲染到所有main的尾部,for循环是用来将所有图片渲染进来的,只要checkScrollSlide成立就会完成整个for循环后再去加载瀑布流功能。
document.getelementsByClassName()不支持IE9以下浏览器。但IE8及其以下的使用人数还是挺多的。所以自己写着玩的可以随便用,写给别人用的还是少用那个方法,向她那样比较好。
为什么不用document.getelementsByClassName() ? 因为这是HTML5中出现的dom API,老师在录制这个视频的时候,估计HTML5还没流行开。
课程须知
1.你一定对HTML+CSS比较熟悉; 2.掌握一定的JS基础知识,尤其是函数封装、调用等知识; 3.对jQuery相关知识掌握。
老师告诉你能学到什么?
1.学会实现瀑布流布局实现的三种方式; 2.div如何定位和排序; 3.掌握CSS3中多栏布局的知识。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消