Web前端实现瀑布流的几种方法

作者: 莽原奔马668 | 来源:发表于2017-03-31 15:12 被阅读7103次

    前端实现瀑布流的方法很多,其中最简单的就是用CSS实现,其次是通过jQuery实现,最麻烦的就是js,那么就从最麻烦的开始吧$_$

    不管用哪种方法去实现瀑布流效果,html文件里的写法都是相同的,特别是body里的写法,简直是一毛一样的。先把html里的内容粘贴如下:

    html文件

    1.js实现瀑布流效果

    不管是什么语言,实现瀑布流效果的基本思路都是一样的,具体的我就不说了,只聊干货,上代码。

    下面看下CSS里面的处理,还是直接粘贴代码如下:

    css文件

    基本的处理搞完了,下面就是最最重要的js处理了。

    首先在html文件的head标签里导入js文件,如下:

    <!--引入js代码-->

    <script src="js/index.js"></script>

    为了实现瀑布流效果,我们需要把已有的数据先按照瀑布流效果排列好,先来一个实现瀑布流的函数,有详细的步骤注释,粘贴如下:

    实现瀑布流的函数

    $函数是自定义的函数,根据id获得标签

    $函数

    还有一个获取数组中特定值的脚标的函数

    获取脚标

    在网页加载完毕的onload函数中调用实现瀑布流的函数,第一个参数是最外层的div标签的id="main",第二个参数是每个盒子div标签的类名class=“box”。

    下面要考虑加载更多新图片了,在此就写成静态数据进行加载。首先先判断什么时候加载,我的判断是,当浏览器页面的偏移量加上浏览器的高度大于加载的最后一个盒子的头部偏移量的时候,加载新的数据。实现函数如下:

    判断是否加载的函数

    判断过,需要加载数据的话,就加载新的数据咯

    加载数据

    OK,js实现瀑布流效果搞定了。

    2.jQuery实现瀑布流效果

    首先要保证你有jQuery文件,然后导入jQuery文件,css文件跟js实现瀑布流效果是一样的,就不重新粘贴一遍了。重点的还是我们自己写的js实现文件,道理跟js实现是一样的,所以我连函数名起得都一样,不多说,两个主要的函数直接粘贴如下:

    实现瀑布流函数 判断是否加载的函数 加载数据

    OK,jQuery实现瀑布流效果搞定了。

    3.css实现瀑布流效果

    现在可以把前面的都忘掉了,最简单的实现方式来了。这个是没有js文件的,只需要修改css文件就行,直接粘贴代码:

    css文件

    OK,css实现瀑布流效果搞定了。

    纳尼?就三行?对,就三行!这三行堪比三行情书!!!

    效果图如下:

    效果图

    相关文章

      网友评论

      • 0bce343be48f:楼主,我想问一下。用css实现的瀑布流布局,循环的结构的时候,循环不是从左到右,而是上下的。这怎么解决
      • 32f989be1e4d:支持移动端吗?
      • 草字头乌君:最后一种方式还是不太好啊,手机下拉刷新最后一个div会截半跑到另外一边去
      • f8979d3338f5:楼主你好!我有个地方有点困惑,就是在触发加载图片的条件那里,document.body.offsetHeight这个值应该是页面的全部的高度,并不是可视窗口的高度。最后一个图片的offsetTop肯定是比这个值小的啊,望解惑
        f8979d3338f5:我测试了下,是不是 var screenHeight = document.documentElement.clientHeight;这样就够了,因为即使在怪异模式下,这个也是有值的,而且是可视的区域
        f8979d3338f5:我是在谷歌浏览器下测试的,发现效果不太对
      • 白马非马哦:webstorm主题能不能分享下~~谢谢
      • 就现在action:css可以这样搞瀑布流样式~下拉就现实?而不是用他弄样式??
      • Shaneee:请问这是什么主题啊?很喜欢
      • csu_zipple:厉害了
      • Charlie_:我有一个想法,可不可以在HTML代码里包裹img的div区块只写一个,用JS来控制盒子的数量可否?:relieved:
        莽原奔马668:@Charlie_ 可以的
      • Koali啦:很棒!
      • 五月小闲人:已收藏,但是兄弟,下次代码能不能不放图,我直接复制可以吗
        莽原奔马668:@四月C webstorm里的代码在简书上不让粘贴,最后实在没办法,我才截图的:sweat:
      • 皇城名家:我一直都是用一个插件搞定的,没想到CSS这么简单就能实现啊
      • 3ee2a25c20bd:看上去还不错
      • 64faae455825:phpstorm编辑器,就是启动太卡了...不过这个编辑器自动对齐的功能还是蛮好用哒!!!O(∩_∩)O哈哈哈~:smiley:
        评论区,竟然不能使用markdown语法...╭(╯^╰)╮,生气了~
      • GISirFive:楼上说的对,木有图!
        莽原奔马668:马上添上效果图
      • 琄玥:mark下:smirk:
      • KunMinX:没图你说个
        莽原奔马668:马上添上效果图

      本文标题:Web前端实现瀑布流的几种方法

      本文链接:https://www.haomeiwen.com/subject/vqcvottx.html

      热点阅读