var $boxs=$("#main>div"); 可以等于 var $box=$(".box")不是直接有类选择器么
2016-12-16
这节课的主要内容——加载更多的图片。
1.何时加载:最后一张图片的距离父元素顶端位置与盒子高度的一半之和要小于滚动条的长度与可视区页面高度之和 即(offsetTop+盒子高度的一半<scrollTop+clientHeight)
2.怎么加载:json数据交换格式;创造元素并开始嵌套(用到append()方法)
————————————
纠正一下,是appendChild()方法 语法:parent.appendChild(children)
1.何时加载:最后一张图片的距离父元素顶端位置与盒子高度的一半之和要小于滚动条的长度与可视区页面高度之和 即(offsetTop+盒子高度的一半<scrollTop+clientHeight)
2.怎么加载:json数据交换格式;创造元素并开始嵌套(用到append()方法)
————————————
纠正一下,是appendChild()方法 语法:parent.appendChild(children)
2016-12-16
这节课的主要内容——盒子排列。
3个步骤:
1.找到上一行里高度最小的盒子(即空隙最大的地方)
2. 把要排列队列里的第一个的盒子定位到这个空白处(需要两个数值,第一个是上一行最矮盒子的高度【方法:Math.min.apply()】,第二个是上一行最矮盒子的左边距【两种办法:盒子宽*最矮盒子下标;数组里最小盒子的offsetLeft。】)
3. 更新这一列的高度,最矮元素的高,加上当前盒子的高度
3个步骤:
1.找到上一行里高度最小的盒子(即空隙最大的地方)
2. 把要排列队列里的第一个的盒子定位到这个空白处(需要两个数值,第一个是上一行最矮盒子的高度【方法:Math.min.apply()】,第二个是上一行最矮盒子的左边距【两种办法:盒子宽*最矮盒子下标;数组里最小盒子的offsetLeft。】)
3. 更新这一列的高度,最矮元素的高,加上当前盒子的高度
2016-12-15
这节课的主要内容就是——固定第一行盒子。
共3个步骤:
1.确定列数:以当前的页面宽度,除以一个 box 的宽度,结果取整{Math.floor()}
2.确定 main 容器的宽度:列数(即每行中能容纳box的个数)乘以一个 box 的宽(也可以这样写:oParent.style.width = oBoxW*cols+'px';)
3.定位第一行盒子:将 box 集合作为数组取出,遍历子元素,加入入数组
共3个步骤:
1.确定列数:以当前的页面宽度,除以一个 box 的宽度,结果取整{Math.floor()}
2.确定 main 容器的宽度:列数(即每行中能容纳box的个数)乘以一个 box 的宽(也可以这样写:oParent.style.width = oBoxW*cols+'px';)
3.定位第一行盒子:将 box 集合作为数组取出,遍历子元素,加入入数组
2016-12-14
已采纳回答 / 山无夜4114517
符合一次条件就将json的data中的所有图片渲染到所有main的尾部,for循环是用来将所有图片渲染进来的,只要checkScrollSlide成立就会完成整个for循环后再去加载瀑布流功能。
2016-12-13
document.getelementsByClassName()不支持IE9以下浏览器。但IE8及其以下的使用人数还是挺多的。所以自己写着玩的可以随便用,写给别人用的还是少用那个方法,向她那样比较好。
2016-12-11
为什么不用document.getelementsByClassName() ? 因为这是HTML5中出现的dom API,老师在录制这个视频的时候,估计HTML5还没流行开。
2016-12-08