js实现瀑布流的三种方式比较,js瀑布三种方式

您也许感兴趣的篇章:

  • js达成的玉女瀑布流效果代码
  • javascript自适应宽度的瀑布流完结思路
  • 纯js完成瀑布流展现照片(自动适应窗口大小卡塔尔
  • 深入分析瀑布流结构:JS+相对固定的达成
  • js完结瀑布流的生龙活虎种简易方法实例共享
  • 原生JavaScript+LESS完成瀑布流
  • js完成仿百度瀑布流的方法
  • 原生JS达成响应式瀑布流布局

瀑布流是风流倜傥种网址页面布局,视觉彰显为犬牙相错的多栏布局,随着页面滚动条向下滚动,…

js完毕瀑布流的三种办法相比,js瀑布二种艺术

瀑布流是后生可畏种网站页面构造,视觉展现为参差不齐的多栏结构,随着页面滚动条向下滚动,这种布局还有大概会不断加载数据块并附加至当下后面部分。最初选择此结构的网站是Pinterest,渐渐在境内风靡开来。本国半数以上清新站基本为那类风格。

图片 1

瀑布流特点:

1、形形色色:整版以图纸为主,大小不意气风发的图纸依照一定的原理排列。
2、唯美:图片的作风以唯美的图纸为主。
3、操作简便:在浏览网址的时候只必要轻装滑动一下鼠标滚轮,一切的理想的图形能够便可表现在您前边。

瀑布流布局实现情势:
1、守旧多列浮动

图片 2

  • · 各列固定宽度,何况左浮动;
  • ·
    一列中的数据块为一组,列中的每块依次排列;
  • ·
    更相当多据加载时,要求各自插入到分化的列中;

优点:

      布局轻巧,应该说没啥特别的难题;

      不用刚烈知晓多少块中度,当数码块中有图片时,就无需钦定图片高度。

缺点:

     
列数固定,扩大不易,当浏览器窗口大小变化时,只可以固定的x列,若是要增多一列,很难调度数据块的排列;

      滚动加载更许多据时,还要钦命插入到第几列中,依旧不便利。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>传统多列浮动</title>
  <style>
    div{
       float:left;
       margin: 5px 5px 5px 5px;
    }
    p{
      background: #90EE90;
      width:160px;
      text-align:center;
    }
  </style>
</head>
<body>
  <div>
    <p style="height:230px;">a1</p>
    <p style="height:100px;">a2</p>
  </div>

  <div>
    <p style="height:100px;">a3</p>
    <p style="height:300px;">a4</p>
  </div>

  <div>
    <p style="height:250px;">a5</p>
    <p style="height:200px;">a6</p>
  </div>
</body>
</html>

效果:

图片 3

2、CSS3 样式定义

图片 4

优点:

      直接 CSS 定义,最有益了;

      扩张方便,间接往容器里增添内容就可以。

缺点:

      只有高端浏览器中本领应用;

     
还会有一个败笔,他的数据块排列是从上到下排列到自然中度后,再把剩余元素依次拉长到下一列,这么些真相上就分裂样了;

     
鉴于那八个器重症结,注定了该格局只可以局限于高等浏览器,何况,更相符于文字多栏排列。

示例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3瀑布布局</title>
<style>
    .container{
        -webkit-column-width:160px;
        -moz-column-width:160px;
        -o-colum-width:160px;
        -webkit-column-gap:1px;
        -moz-column-gap:1px;
        -o-column-gap:1px;
    }
    div:not(.container){
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        border-radius:5px;
        background:#90EE90;
        border::#CCC 1px solid;
        display:inline-block;
        width:157px;
        position:relative;
        margin:2px;
    }
    .title{
         line-height:80px; font-size:18px; color:#999;
         text-align:center;
         font-family:"Microsoft YaHei";
    }
</style>
</head>

<body>
<section>
    <div class="container">
    <div style="height:80px" class="title">纯CSS3瀑布布局</div>
    <div style="height:260px"></div>
    <div style="height:65px"></div>
    <div style="height:120px"></div>
    <div style="height:145px"></div>
    <div style="height:90px"></div>
    <div style="height:145px"></div>
    <div style="height:160px"></div>
    <div style="height:65px"></div>
    <div style="height:230px"></div>
    <div style="height:140px"></div>
    <div style="height:85px"></div>
    <div style="height:20px"></div>
    <div style="height:145px"></div>
    <div style="height:50px"></div>
    <div style="height:65px"></div>
    <div style="height:230px"></div>
    <div style="height:140px"></div>
    <div style="height:85px"></div>
    <div style="height:20px"></div>
    <div style="height:145px"></div>
    <div style="height:50px"></div>
    <div style="height:145px"></div>
    <div style="height:160px"></div>
    <div style="height:240px"></div>
  </div>
</section>
</body>
</html>

效果:

图片 5

3、相对定位
     
最优的生机勃勃种方案,方便加多数据内容,窗口变化,列数/数据块都会自动调解;

优点:
      方便增添数据内容,窗口变化,列数/数据块都会自行调节;

缺点:

      需求得以完毕知道数据块中度,假使中间含有图表,需求掌握图片中度;

      JS 动态计算数据块地点,当窗口缩放频仍,恐怕会狂耗品质。

思路:

1卡塔尔 数据块排列(对容器中原来就有元素进行排列),算法步骤简述下:
安装(块成分宽度生龙活虎致)
· 早先化时,对容器中原来就有多少块成分实行第一回总结,必要客户给定:
a,容器成分 — 以此博得窗口总增长幅度; b,列宽度(块成分宽度);
c,最小列数;
·总括突显列数:窗口宽度除以多少个块框宽度向下取整,并安装waterfall彰显的居中
·存款和储蓄每列的可观
·
拿到列数后,必要保留每一种列的方今中度,那样在充裕每种数据块时,才通晓起先中度是有一点点;
·
依次取容器中的全体数据块,先找找当前高度最小的某列,之后依照列序号,鲜明数据块的left,top值,left
为所在列的序号乘以列宽,top
为所在列的脚下高度,最后更新所在列的脚下高度加上这个数目块成分的万丈,至此,插入二个因素甘休;
· 当全部因素插入完成后,调节容器的万丈为各列最大的万丈值,甘休依次调度。

2State of Qatar 异步加载数据,包罗七个步骤:
·
绑定滚动事件,并分明预加载线高度值,即滚动到哪个高度后,需求去加载数据,其实那一个就是列的眇小高度值,那样当前滚动值和微小中度值比较一下就能够判别出来,是不是要接触加载数据;
·
加载数据,函数字传送参,能提供加载数据函数和终止加载(加载多少时停下)函数,以更便于的调节。

上述便是本文的全体内容,希望对大家的读书抱有助于。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图