文档章节

web:瀑布流布局

樂天
 樂天
发布于 2015/11/21 22:35
字数 455
阅读 133
收藏 2
点赞 0
评论 0

瀑布流布局浅析

折腾:瀑布流布局(基于多栏列表流体布局实现)

第一次进入的时候,根据浏览器宽度以及每列宽度计算出列表个数,然后不管三七二十一,每列先加载个5张图片再说。

当滚动的时候,对每一列的底部位置做检测,如果在屏幕中或屏幕上方,则立即append一个新图片(注意:为了简化代码,提高性能,同时便于演示等,这里只append了一个)。因为,滚动时连续的,因此,我们实际看到的效果是图片不断load出来。

当浏览器宽度改变的时候,页面上有个id为waterFallDetect空span标签,这个标签作用有两个:一是实现两端对齐效果,二是用来检测瀑布流布局是否需要刷新。

检测原理如下: 该span标签宽度与一个列表宽度一致,当浏览器宽度变小的时候,如果小到一定程度,显然,浏览器最右边的列表就会跑到下一行,把空span挤到后面去,空span发生较大的水平位移,显然,可以通知脚本,布局需要刷新;当浏览器宽度变大的时候,如果变大的尺寸超过一列的宽度,显然,这个空span灰跑到第一行去,同样是发生较大的水平位移,因此,又可以通知脚本刷新瀑布流布局了。

这个方法的好处是几乎没有计算就可以一点不差地知道何时瀑布流布局需要刷新。这显然要比设置resize定时器+位置尺寸计算要简单高性能地多。

堆糖瀑布流 库

本文转载自:

共有 人打赏支持
樂天
粉丝 133
博文 669
码字总数 147271
作品 3
深圳
程序员
小程序之图片瀑布流(最全实现方式,额外加送懒加载)

效果图 来来来,看啊看,外面的世界多好看, 效果图展示的是瀑布流布局 && 懒加载的效果 数据 图片数据来源张鑫旭的网络日志 先说下我们的图片链接格式 所有的链接都是这样的格式,我们需要改...

小心夹手 ⋅ 05/11 ⋅ 0

iOS开发-UICollectionView实现瀑布流

关于瀑布流的实现网上有很多种解法,自定义控件,TableView+ScrollView,UICollectionView是iOS6发布之后用于展示集合视图,算起来已经发布三年左右了,不过知识点是不变的,集合视图提供了一...

Daniel_s ⋅ 2015/12/09 ⋅ 0

响应式布局页面之瀑布流布局浅析

瀑布流式布局(简称瀑布流)最先在网站上应用 Pinterest (貌似是最早使用这种布局的网站了),Mark之,蘑菇街,点点网等页面都采用了这种布局。那么什么是瀑布流呢?瀑布流的好处在哪? 瀑布流...

H_J ⋅ 2014/03/14 ⋅ 0

网页瀑布流效果实现的几种方式

前言 like a mountain that is in our path,wo cannot complain that it is there,we simply have to climb it 起由 最近,在搭建个人博客时,其中的Demo展示页面想用瀑布流形式展现,发现现有...

撒网要见鱼 ⋅ 2016/11/13 ⋅ 0

瀑布流布局的开发实践

瀑布流的布局方式展现的内容通常是扁平化、琐碎的东西。首先吸引人的应该是图片,并且图片是那种参差不齐的,如果瀑布流中文字过多,会给人很杂乱的感觉,所以瀑布流更适合单纯的图片浏览。 ...

Qianduaner ⋅ 2013/08/25 ⋅ 0

冷漠叻荭颜/WaterfallFlowDemo

#WaterfallFlowDemo 瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早...

冷漠叻荭颜 ⋅ 2015/05/11 ⋅ 0

瀑布流布局与木桶布局

瀑布流布局 在瀑布流布局中,每一个元素的宽度相同,高度不同,下图中的数字表示图片被添加的顺序,每次添加新的图片时,都将其放在高度最小的一栏,以保证每一栏的高度尽可能相近。 思路 假...

_Dot大师兄 ⋅ 2017/09/20 ⋅ 0

Ajax+json+jquery实现无限瀑布流布局

Ajax+json+jquery实现无限瀑布流布局 <!doctype html><html><head><meta charset="utf-8"><title>定宽Jquery+AJAX+JSON瀑布流布局(每行代码都有详细注释)</title><style type="text/css">......

mengmeng1990 ⋅ 2012/08/19 ⋅ 0

RecyclerView的基础使用

RecyclerView的基本功能介绍: 1. 通过setLayoutManager方法可以设置布局,几个子类布局如下: -> LinearLayoutManager(ListView形式的布局) -> GridLayoutManager(GridView形式的布局) -> ...

丢掉过去重新再来 ⋅ 2015/12/08 ⋅ 0

jquery实现瀑布流

最近在做我们产品的官网,需要开发一个照片墙展示界面。到网上搜了一下模版,决定用瀑布流的方式展示照片。于是去搜索瀑布流的demo,有很多很好的例子,其中堆糖的瀑布流感觉比较完美,但是太...

一只小蚂蚁 ⋅ 2013/12/24 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Kubeflow实战系列:利用TFJob导出分布式TensorFlow模型

介绍 本系列将介绍如何在阿里云容器服务上运行Kubeflow, 本文介绍如何使用TfJob导出分布式模型训练模型。 第一篇:阿里云上使用JupyterHub 第二篇:阿里云上小试TFJob 第三篇:利用TFJob运行...

全部原谅 ⋅ 16分钟前 ⋅ 0

007. 深入JVM学习—老年代

老年代空间的主要目的是用于存储由Eden发送来的对象,一般在经历好几次“Minor GC”还会保存下来的对象,才会被复制到老年代,这样就可以存放更多的对象,同时在老年代中执行GC的次数也相对较...

影狼 ⋅ 17分钟前 ⋅ 0

常见的一些C#开源框架或者开源项目

原:https://blog.csdn.net/qq_27825451/article/details/70666044 Json.NET http://json.codeplex.com/ Json.Net 是一个读写Json效率比较高的.Net框架.Json.Net 使得在.Net环境下使用Json更......

whoisliang ⋅ 18分钟前 ⋅ 0

设计模式基本原理

刚开始接触编程这行的时候看过设计模式,当时感觉学这些模式没有太大的用处,当时也看不太懂。但是随着慢慢接触这一行,经过一段时间的编程以后,再回过头来看设计模式,发现设计模式的确是太...

王子城 ⋅ 22分钟前 ⋅ 0

阿里云全面支持IPv6!一文揽尽4位大咖精彩演讲

摘要: 自从去年11月以来,阿里巴巴高度重视数据中心的网络改造、云产品改造、应用及网络改造等多个维度,经过半年以来的建设,阿里云已经完成了域名解析等关键产品的分析,现在阿里云已经完...

传授知识的天使 ⋅ 32分钟前 ⋅ 0

windows Android sdk 配置

1、下载Android SDK,点击安装,直接默认路径即可! 下载地址:http://developer.android.com/sdk/index.html 2、默认路径安装后,安装完成,开始配置环境变量。 3、打开计算机属性——高级系...

阿豪boy ⋅ 35分钟前 ⋅ 0

bash shell script 简明教程

User <--> bash <--> kernel shell is not kernel or part of kernel various shells: tcsh, csh, bash, ksh find the using shell: echo $SHELL find all the shells: cat /etc/shells what......

mskk ⋅ 37分钟前 ⋅ 0

Service Mesh简史

William Morgan Service Mesh是一个相当新的概念,讲它的“历史”似乎有些勉强。就目前而言,Service Mesh已经在部分企业生产环境中运行了超过18个月,它的源头可以追溯到2010年前后互联网公...

好雨云帮 ⋅ 37分钟前 ⋅ 0

10个免费的服务器监控工具

监控你的WEB服务器或者WEB主机运行是否正常与健康是非常重要的。你要确保用户始终可以打开你的网站并且网速不慢。服务器监控工具允许你收集和分析有关你的Web服务器的数据。 有许多非常好的服...

李朝强 ⋅ 50分钟前 ⋅ 0

压缩工具之zip-tar

zip 支持目录压缩。使用yum安装zip包,使用yum安装unzip包 zip 1.txt.zip 1.txt #将1.txt文件压缩,新生成的压缩文件为1.txt.zip,原文件保留 zip -r 123.zip 123/ #-r对目录操作。将123/目录...

ZHENG-JY ⋅ 50分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部