Web前端原生javaScript-瀑布流

前端开发的技术栈是架构师吗

前端web开发技术

web前端开发技术试题

####【代码实例在文章底部】
瀑布流是什么这里就不多介绍了，就简单说一下原理。
瀑布流布局规则：

<1>每个瀑布流元素宽度相等;
<2>以第一行为准，哪个高度最小，就将下一个元素放在该元素下面，然后以此类推，无限循环下去。

接下来就是撸码过程。

一、首先我们先将图片资源导入项目中，简单的搭建好界面。将所有元素左浮动，并且每个元素宽相等。其中元素间距是每个元素的padding，视觉错误。这个是为了更好的计算每个元素的offsetWidth。

二、接下来就是要设置父元素宽度了，并让他居中。这个主要是为了让元素动态展示在居中部位。

获取到所有瀑布流元素allBoxs

获取其中一个元素的宽度boxWidth

获取浏览器的宽度对boxWidth相除取整，n = parseInt()，页面一行最多显示n个

然后父元素的宽度等于=n*boxWidth

设置父元素居中margin:0 auto

结果就是第一张图展示后的结果。

三、这个就是最主要的瀑布流过程：

1.首先我们要获得所有页面上的瀑布流元素allBoxs

2.然后将第一行每个元素的高度存入一个数组boxHeightArray地[n]

3.然后从第n+1个开始获取这个boxHeightArray的最小高度的值minValue，和这个值所对应的下标index

4.然后设置第n+1个元素为绝对定位absolute,第r+1个元素top=minValue 和 left=index*boxWidth（元素的宽度）

5.更新boxHeightArray中的boxHeightArray[index] +=(n+1)元素的offsetHeight

瀑布流主要代码

//获取数据

function scorllPullBox(id) {

var parentBox = $(id) //首先获取父div

var allBoxs = parentBox.children //获取到所有瀑布流元素

var boxWidth = allBoxs[0].offsetWidth //获取其中一个元素宽度

var colsNumber = parseInt(document.body.clientWidth / boxWidth) //取得屏最宽显示几个元素

parentBox.style.width = boxWidth * colsNumber + ‘px’ //父div宽度

parentBox.style.margin = ‘0 auto’ //居中</p>

var boxHeightArray = [] //创建高度数组

var boxHeight = 0 //初始高度变量为0

for (var i = 0; i < allBoxs.length; ++i) {

boxHeight = allBoxs[i].offsetHeight //取得每个元素高度

if (i < colsNumber) {

boxHeightArray.push(boxHeight) //将colsNumber个元素存入高度数组

} else {

var minHeight = Math.min.apply(null, boxHeightArray) //获得最小高度

var minIndex = arrayMinIndex(boxHeightArray, minHeight) //获得最小高度下标

allBoxs[i].style.position = ‘absolute’ //将第i个元素改为绝对定位

allBoxs[i].style.left = minIndex * boxWidth + ‘px’ //设置left

allBoxs[i].style.top = minHeight + ‘px’ //设置top

boxHeightArray[minIndex] += allBoxs[i].offsetHeight //更新数组高度注意+号

}

（1）首先前n个元素是浮动的在页面上面的，并存入数组的（步骤2）

（2）其次第n+1个元素是要找到第一行最矮的元素，并定位在它的后面（黄色图片为第n+1）（步骤3，4）

（3）然后更新数组中高度，拼接后的元素高度+原来元素的高度（步骤5）

四、添加滑动加载更多（假数据）

思想步骤

1.获取最后一个元素lastBox，当他显示出一半（随意）的时候加载更多数据

2.lastBox的一半的高度 + lastBox.offsetTop与获得整个滑动区域的高度 + 当前网页高度作比较

滑动刷新判断条件

//检测刷新状态，判断当最后一个盒子显示出来1/2

function checkRerechData() {

var parentBox = $(‘main’)

var allBoxs = parentBox.children

var lastBox = allBoxs[allBoxs.length – 1]

var lastBoxHeight = lastBox.offsetHeight * 0.5 //获得最后一个盒子一半的高度

var winScrollTopHeight = document.documentElement.clientHeight + scroll().top //获得整个滑动区域的高度+当前网页高度

var lastBoxDistance = lastBoxHeight + lastBox.offsetTop //获得最后一个元素的offsetHeight+自身高度的一半</p>

if (winScrollTopHeight > lastBoxDistance) {

//是否最后一个元素已经显示出来1/2.

return true

}

return false

}

web前端开发技术认识

web前端开发技术—html

web前端开发技术期末考试

Web前端原生javaScript-瀑布流

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发