浅谈瀑布流

瀑布流又称瀑布流式布局,是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局,最早采用此布局的是网站是 Pinterest,后逐渐在国内流行。

瀑布流布局效果

即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置。

那么规则是什么呢?
下面通过图解来分析一下瀑布流的算法。

图解瀑布流算法

当第一排排满足够多的等宽图片时(如下图情况),自然而然的考虑到之后放置的图片会往下面排放。

那么第六张图片,放置在什么位置呢?是下图的位置么?

我们通过瀑布流算法实验得到,后面紧跟的第六张图片的位置应该是这个位置。

为什么呢?
因为放置它之前,这一列的高度为所有列中最小,所以会放置在这个地方。
所以我们知道了,如果再继续放置下去,第七张图片应该是这个位置,对吗?

通过瀑布流算法实验得出位置正确。看懂这个图示应该就能理解了瀑布流的原理算法。

JS 实现代码

这里使用了jQuery

  var colCount   //定义列数
  var colHeightArry= []   //定义列高度数组
  var imgWidth = $(‘.waterfall img‘).outerWidth(true)   //单张图片的宽度

  colCount = parseInt($(‘.waterfall‘).width()/imgWidth)   //计算出列数
  for(var i = 0 ; i < colCount; i ++){
    colHeightArry[i] = 0
  }
  //[0,0,0]

  $(‘.waterfall img‘).on(‘load‘,function(){

    var minValue = colHeightArry[0]  //定义最小的高度
    var minIndex = 0  //定义最小高度的下标
    for(var i = 0 ; i < colCount; i ++){
      if(colHeightArry[i] < minValue){   //如果最小高度组数中的值小于最小值
        minValue = colHeightArry[i]   //那么认为最小高度数组中的值是真正的最小值
        minIndex = i  //最小下标为当前下标
      }
    }

    $(this).css({
      left: minIndex * imgWidth,
      top: minValue
    })
    colHeightArry[minIndex] += $(this).outerHeight(true)
  })

  //当窗口大小重置之后,重新执行
  $(window).on(‘resize‘,function(){
    reset()
  })

  //当窗口加载完毕,执行瀑布流
  $(window).on(‘load‘,function(){
    reset()
  })

  //定义reset函数
  function reset(){
    var colHeightArry= []
    colCount = parseInt($(‘.waterfall‘).width()/imgWidth)
    for(var i = 0 ; i < colCount; i ++){
      colHeightArry[i] = 0
    }
    $(‘.waterfall img‘).each(function(){
      var minValue = colHeightArry[0]
      var minIndex = 0
      for(var i = 0 ; i < colCount; i ++){
        if(colHeightArry[i] < minValue){
          minValue = colHeightArry[i]
          minIndex = i
        }
      }

      $(this).css({
        left: minIndex * imgWidth,
        top: minValue
      })
      colHeightArry[minIndex] += $(this).outerHeight(true)
    })
  }

Demo 演示

瀑布流 Demo 效果

总结瀑布流布局原理

  • 设置图片宽度一致
  • 根据浏览器宽度以及每列宽度计算出列表个数,列表默认0
  • 当图片加载完成,所有图片依次放置在最小的列数下面
  • 父容器高度取列表数组的最大值

原文地址:https://www.cnblogs.com/evenyao/p/9523226.html

时间: 2024-10-02 00:59:37

浅谈瀑布流的相关文章

io流浅谈

IO流浅谈 在这篇文章里,我会分别和大家聊字节流和字符流 一字节流 File     File:文件和目录(文件夹)路径名的抽象表示形式.       File的构造方法:    File(String pathname):把一个路径名称封装成File对象    File(String parent, String child):把一个父路径和一个子路径封装成一个File对象    File(File parent, String child):把一个父路径File对象和一个子路径封装成一个Fi

新随笔(一) 从用户心理体验谈慎用瀑布流设计

新随笔(一) 从用户心理体验谈慎用瀑布流设计 最早使用瀑布流布局技术的是Pinterest,瀑布流设计确实带给用户更新鲜的视觉体验,很容易引导用户不停滚动鼠标,感觉丰富的内容永远不会结束,瀑布流的设计有他很明显的优点,但同时也有他的缺点,并不是所有网站都适用. 社交网站和移动设备适用于瀑布流设计 移动界面由于手机屏幕狭窄,列表项垂直排列,需要单手频繁的滚动,当用户向下滚动内容,自动加载更多的内容,而无需等待页面预加载.这样,用户会感觉到响应很及时,现在微博.微信均采用此方式, 社交网站之所以采用

.net中对象序列化技术浅谈

.net中对象序列化技术浅谈 2009-03-11 阅读2756评论2 序列化是将对象状态转换为可保持或传输的格式的过程.与序列化相对的是反序列化,它将流转换为对象.这两个过程结合起来,可以轻松地存储和传输数 据.例如,可以序列化一个对象,然后使用 HTTP 通过 Internet 在客户端和服务器之间传输该对象.反之,反序列化根据流重新构造对象.此外还可以将对象序列化后保存到本地,再次运行的时候可以从本地文件 中“恢复”对象到序列化之前的状态.在.net中有提供了几种序列化的方式:二进制序列化

代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)

代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到合意的,所以根据网上找的一段代码,进行了较大改动. 需引用 zepto 或 jquery. 我这个是应用于手机上的,两列瀑布流,图片高度未知——等图片的onloaded事件触发后,才对容器进行计算和定位. 大容器是 $("#imgList"),容器格子是$(".pin"

五 浅谈CPU 并行编程和 GPU 并行编程的区别

前言 CPU 的并行编程技术,也是高性能计算中的热点,也是今后要努力学习的方向.那么它和 GPU 并行编程有何区别呢? 本文将做出详细的对比,分析各自的特点,为将来深入学习 CPU 并行编程技术打下铺垫. 区别一:缓存管理方式的不同 GPU:缓存对程序员不透明,程序员可根据实际情况操纵大部分缓存 (也有一部分缓存是由硬件自行管理). CPU:缓存对程序员透明.应用程序员无法通过编程手段操纵缓存. 区别二:指令模型的不同 GPU:采用 SIMT - 单指令多线程模型,一条指令配备一组硬件,对应32

管理从砖瓦进化为人——浅谈传统软件工程到敏捷软件开发之变革

管理从砖瓦进化为人 --浅谈传统软件工程到敏捷软件开发之变革 前言 如果把软件开发过程比作修筑一座建筑的话,传统的软件工程方法对人的管理就像是把人化作一砖一瓦,秩序地堆砌,一层一层构建起摩天大厦. 显然地,人是不同于砖瓦那样的死物的.人作为一种复杂的动物,软件开发者会有喜怒哀乐,枯燥重复的工作内容会使他们提不起兴趣而缺乏激情:客户想法会随变动的现实而一天天有所转变,软件需求很难保持一成不变:开发者与测试者对于项目的认识会存在差异,而差异将导致效率的降低--因而传统的有些"反人类天性"的

浅谈用ModelSim+Synplify+Quartus来实现Altera FPGA的仿真

浅谈用ModelSim+Synplify+Quartus来实现Altera FPGA的仿真 工作内容: Mentor公司的ModelSim是业界最优秀的HDL语言仿真软件,它能提供友好的仿真环境,是业界唯一的单内核支持VHDL和Verilog混合仿真的仿真器.它采用直接优化的编译技术.Tcl/Tk技术.和单一内核仿真技术,编译仿真速度快,编译的代码与平台无关,便于保护IP核,个性化的图形界面和用户接口,为用户加快调错提供强有力的手段,是FPGA/ASIC设计的首选仿真软件. Synplify.S

浅谈C++ IO标准库(1)

IO流:一.C++中标准IO库:1).为面向对象的标准库.2).以继承的形式设计.     A)以iostream为基类,派生出了fstream,strigstream类.注意:fstream.stringstream没有继承关系,open.close为fstream类自有的函数操作,str为stringstream自有的函数操作,故其各函数操作不可混用,而iostream中的函数操作其两子类由于继承关系可以调用.     B) 其禁用了复制和赋值操作,故IO对象不可以复制或赋值.这将导致像ve

Web服务器和动态语言如何交互--CGI&amp;FastCGI&amp;FPM浅谈

一个用户的Request是如何经过Web服务器(Apache,Nginx,IIS,Light)与后端的动态语言(如PHP等)进行交互并将结果返回给用户的呢? 本文浅谈个人观点,可能有误,欢迎拍砖,共同学习. 一. 首先明确几个概念,以便后续说明 CGI:(Common Gateway Interface)Http服务器与后端程序(如PHP)进行交互的中间层. 工作原理及处理方式(fork-and-execute模式): 1.当Web Server有Request到达 2.fork一个CGI进程或