IT学习网是免费的终身在线学习平台,现在主要提供IT(互联网)方面的教程,博客等方面的内容
主页 > 前端 > > 正文

瀑布流的实现

来源:IT学习网整理 发布时间:2020-02-14 18:51 标签:实现流的瀑布
浏览:

书籍/周边

站内搜索

fly63前端网

提交

我要投稿

瀑布流的实现

时间: 2019-08-08阅读: 178标签: 布局

现在很多网站都会使用瀑布流的一个效果,什么是瀑布流呢,用在哪些地方呢?

瀑布,流的,实现 . 瀑布流的实现


大概就是这样的一个效果,一般用于无法保证图片大小的网站。

先看下布局+css

.cont{margin: 0 auto;position: relative;} .box{float: left;padding: 6px} .imgbox{border: solid 1px black;border-radius: 6px;padding: 6px} .imgbox img{width:200px;display: block;} <div> <div> <div> <img src="http://www.fly63.com/article/detial/5201/images/4.jpg" > </div> </div> </div>


思路:

瀑布流:第一行正常浮动,从第二行开始,每个元素都定位到上一行的最小高度的元素下

1.获取元素
2.布局
3.区分第一行和后面的行
4.在第一行,找到第一行所有的高度
5.在后面的行,找到最小高度设置定位,left,top
6.修改之前的最小高度

思路就是这样,这里的难点在于找到第一行和最小高度;将思路列出就会很清晰的知道自己要做些什么;所以还是比较推荐用面向对象去写,后续的使用会更多。可以用这些小案例来练手,增加熟练度。

function Waterfall(){ // 1.获取元素 this.ocont = document.querySelector(".cont"); this.abox = document.querySelectorAll(".box"); // 将来准备存放第一行元素所有高度的数组 this.heightArr = []; // 2.布局 this.init() } Waterfall.prototype.init = function(){ // 布局 this.num = Math.floor(document.documentElement.clientWidth / this.abox[0].offsetWidth) this.ocont.style.width = this.num * this.abox[0].offsetWidth + "px"; // 3.区分第一行 this.firstLine(); // 和后面的行 this.otherLine(); } Waterfall.prototype.firstLine = function(){ // 4.在第一行,找到第一行所有的高度 for(var i=0;i<this.num;i++){ this.heightArr.push(this.abox[i].offsetHeight) } } Waterfall.prototype.otherLine = function(){ // 5.在后面的行,找到最小高度 for(var i=this.num;i<this.abox.length;i++){ var min = getMin(this.heightArr); var minIndex = this.heightArr.indexOf(min); // 设置定位,left,top this.abox[i].style.position = "absolute"; this.abox[i].style.top = min + "px"; this.abox[i].style.left = minIndex * this.abox[0].offsetWidth + "px"; // 6.修改之前的最小高度 this.heightArr[minIndex] += this.abox[i].offsetHeight; } } function getMin(arr){ // 注意数组的深浅拷贝:深拷贝 var myarr = []; arr.forEach(val => { myarr.push(val); }); return myarr.sort((a,b)=>a-b)[0]; }

还有一个无限加载的小功能,我简单说下思路吧,可以自己写写看!

  W1.准备数据--->自己模拟数组,假装后台给的

        W2-0.绑定滚动事件

        W2.找到页面是否到底--->可视区域的高度+滚走的距离 >= 总高度-100(数值自己感受)

        W3.渲染页面

        W4.生效瀑布流布局


.two_ads{overflow: hidden;} .two_ads a{float: left;width: 49.443%;} .two_ads a:nth-child(2){float: right;} .two_ads img{display: block;margin: 5px 0;max-width: 100%;}

热门文章

  • C++构造函数初始化列表
    C++构造函数初始化列表

    C++构造函数初始化列表

    构造函数的一项重要功能是对成员变量进行初始化,为了达到这个目的,可以在构造函数的函数体中对成员变量一一赋值,还可以采用 初始化列表 。 C +...

  • 抢占超声医学影像产业学习it的网站C位
    抢占超声医学影像产业学习it的网站C位

    抢占超声医学影像产业学习it的网站C位

    随着全球AI人工智能技术的快速发展与应用 全球医疗领域的智能化 科技化成为大势所趋 据相关资料数据统计 2016年全...

  • “编程从娃娃抓起”:逃得过“奥数” 又
    “编程从娃娃抓起”:逃得过“奥数” 又

    “编程从娃娃抓起”:逃得过“奥数” 又

    您所在的位置: 杭州网 > 新闻中心 > 国内新闻 “编程从娃娃抓起”:逃得过“奥数” 又要被编程套住 2019-03-22 09:18:07;杭州网 新华网 少儿编程火了,打开手机...

  • coreldraw教程网Photoshop iPad完整版本正式上
    coreldraw教程网Photoshop iPad完整版本正式上

    coreldraw教程网Photoshop iPad完整版本正式上

    Photoshop iPad完整版本正式上架苹果App Store...

  • 51自学网ps视频教程走在时尚前端的猎豹
    51自学网ps视频教程走在时尚前端的猎豹

    51自学网ps视频教程走在时尚前端的猎豹

    当消费者发现汽车一味的“大”并不能完全解决出行需求,反而影响了在城市中穿梭的便捷性之后,更加贴合年轻人...

后端

更多 >
后端趣味编程unzip命令 传zip到linux并解压
后端计算机程序设计设置FTP传输软件xftp默认打
后端计算机编程语言有哪些Java实现Linux grep命
后端趣味编程linux安装mysql5.7
后端儿童编程学习linux入门系列8--shell编程入门

工具资源

更多 >