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-瀑布流》
» 本文链接地址:https://www.rokub.com/6182.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!