手把手教你用原生JS实现瀑布流 |
您所在的位置：网站首页 › ios瀑布流算法 › 手把手教你用原生JS实现瀑布流 |
手把手教你用原生JS实现瀑布流
|
瀑布流布局
一、什么是瀑布流布局二、瀑布流布局效果展示三、瀑布流布局原理四、HTML页面布局五、CSS样式布局六、JS核心代码1、全部JS代码展示2、JS代码详解----入口函数3、JS代码详解----父盒子居中4、JS代码详解----子盒子定位
七、升级版1、入口函数更改2、追加检查函数和scroll兼容性写法
一、什么是瀑布流布局
当我们浏览一些图片网站时会发现一些图片宽度相同、高度不同，确能够自动地适应，达到一行一行展示的效果。并且当浏览器滑到底部时，新加载的图片也会自动适应。这一效果就是瀑布流布局。瀑布流布局的特点是图片等宽不等高 二、瀑布流布局效果展示 三列 四列 五列 
三、瀑布流布局原理
实现瀑布流布局最重要的就是怎么用JS使子盒子定位到合适的位置 接下来我用下面这个示意图向大噶解释瀑布流的基本原理（图丑别介意哈哈） 注意 （1）红色盒子是按顺序排在第一行的子盒子 （2）从第二行开始，将第二行的第一个子盒子追加在第一行最矮盒子的后面；将第二行的第二个子盒子追加在第一行第二矮矮盒子的后面…依次类推。 （下面第一张图） （3）新追加子盒子的位置要相对父盒子进行定位。其 左距离 为 下标值 * 子盒子宽度，上距离 为其所跟子盒子的高度 （下面第二张图） （4）排列好第二行的子盒子后将前两行同列子盒子的高度相加看作新的一行子盒子的高度，再重复上述步骤。 （下面第三张图）
很简单的一个页面布局，大噶都能看的懂哈（我这里使用了十六张图片），就不啰（tou）嗦（lan）啦！ 五、CSS样式布局这里提一些大家需要注意的地方 （1）选择器main 要设置 position: relative; 是为了后续一部分子盒子要进行定位操作（子绝父相） （2）选择器box 要设置 float: left; 是因为 div 标签是块状元素，使用 float: left; 使其左浮 * { padding: 0; margin: 0; border: none; } img { width: 200px; vertical-align: top; } #main { position: relative; } .box { float: left; padding: 15px 0 0 15px; } .pic { padding: 10px; border: 1px solid #ccc; } 六、JS核心代码 1、全部JS代码展示 window.addEventListener("load",function() { //1、实现瀑布流布局 waterFall('main','box'); }) }) /* 实现瀑布流布局，传递参数为string类型 */ function waterFall(parent,child) { //1、根据图片的列数来确定父盒子的宽度，父盒子居中 //1.1 获取标签，父盒子和所有子盒子 var father= document.getElementById(parent); var allBox = document.getElementsByClassName(child); //1.2 获取其中一个的宽度 var boxWidth = allBox[0].offsetWidth; //1.3 获取文档的宽度(兼容) var screen = document.documentElement.clientWidth || document.body.clientWidth; //1.4 求出当前图片的列数，是变化的 var cols = parseInt(screen / boxWidth); //1.5 父盒子居中，给父盒子设置宽度 father.style.width = cols * boxWidth + 'px'; father.style.margin = '0 auto'; //2、子盒子定位（从第二行开始） //2.1 定义变量 var heightArr = [], boxHeight = 0, minBoxHeight = 0, minIndex = 0; //2.2 遍历所有的盒子 for(let i = 0;i |
【本文地址】
今日新闻 |
推荐新闻 |