实现瀑布流式布局的几种方法

1、传统多列浮动

定义多个div左浮动成多列,在每个div里插入一推也是左浮动的div。于是就实现了那种参差不齐的效果。

2、直接用css3样式实现

定义一个div直接设置它的属性(column-count:列数),把那些小块div放在这个大的div中就能实现这种瀑布流效果。

但这种css3属性在一些低级浏览器可能无法实现。

3、绝对布局方式实现

实现效果最优,但最麻烦。

需要实现知道数据块高度,如果其中包含图片,需要知道图片高度;

JS 动态计算数据块位置,当窗口缩放频繁,可能会狂耗性能。

具体实现方式就不写出来了。

时间: 2024-08-28 09:50:27

实现瀑布流式布局的几种方法的相关文章

瀑布流式布局

今天终于搞懂了瀑布流式布局,哈哈,总结下 瀑布流式布局分为两种类型:1.每一列都限定宽度不限定高度的布局(使用浮动)2.宽度不是写死的,是根据页面的放大缩小变化的(定位布局) 瀑布流式布局的重点是:每个新加载的模块都应该显示在原有模块高度最小的下方 注意事项: 图片:接收到的数据在插入到文档的过程中,可能会因为图片的加载速度影响Li的最小高度,可以等图片加载完触发某个事件,再继续加载图片(还未研究出):可以设置图片的相对宽高; 什么时候鼠标滚动的时候继续加载数据:当最小高度的模块显示在文档可视区

网站布局--瀑布流式布局

瀑布流式布局简介 现在越来越流行一种瀑布流式布局的页面布局方式,希望你没有对这个名字陌生,看张图相信你就知道它是什么了. 怎么样,是不是很熟悉,越来越多的网站采用这种布局,比如 Pinterest (貌似是最早使用这种布局的网站了),Mark之,蘑菇街,点点网,哇哦等等. 瀑布式流式布局,这个名字是很形象的,这种布局适合于小数据块,每个数据块内容相近且没有侧重.通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.这种布局可以说是扩展了原始的格子布局,给用户更加自由,灵活的感

Android RecyclerView详解及实现瀑布流式布局

RecyclerView一个可以代替ListView和GridView的控件,那么RecyclerView到底比他们好在哪里? RecyclerView架构提供了一种插拔式的体验,所以实现了代码的高度解耦,使用起来也异常的灵活. 我们可以通过设置它的LayoutManager控制其显示的方式,通过ItemDecoration控制Item间的间隔,通过ItemAnimator控制Item的增删动画 RecyclerView.LayoutManager提供了三个实现类其中LinearLayoutMa

布局的几种方式(静态布局、自适应布局、流式布局、响应式布局、弹性布局)

一.静态布局(static layout) 即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位. 1.布局特点 不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示.常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见于pc端. 2.设计方法 PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查

页面布局的几种方式(静态化布局,流式布局,自适应布局,响应式布局,弹性布局)

一.静态布局(static layout) 即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位. 1.布局特点 不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示.常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见于pc端. https://developers.google.com/search/mobile-sites/mobile-seo/respon

静态布局、自适应布局、流式布局、响应式布局、弹性布局简析

近期学习,有很多感想,有时候看似相近的概念,其实意义却不相同.所以学习要针对不同的名词有明确的区分意识. 抽空时间,打算学习下display:flex;本以为就是一个小小的知识点,正式去研究的时候,才发现display:flex;有很多内容,能实现很多效果.比如三栏布局(左右两栏固定,中间栏自适应),圣杯布局. 后来想着经常听到流式布局,自适应布局,响应式布局,他们有什么区别呢,就去搜了许多内容查看,才发现每种布局都有优缺点和不同使用场景. 静态布局:给页面元素设置固定的宽度和高度,单位用px,

android流式布局热门标签的实现

在日常的app使用中,我们会在android 的app中看见热门标签等自动换行的流式布局,今天就为大家分享一种android流式布局的实现. 先看最终效果 自定义流式布局的实现 package com.sunny.flowlayout.view; import java.util.ArrayList; import java.util.List; import android.content.Context; import android.util.AttributeSet; import an

Android中常见的热门标签的流式布局的实现

一.概述:在日常的app使用中,我们会在android 的app中看见 热门标签等自动换行的流式布局,今天,我们就来看看如何 自定义一个类似热门标签那样的流式布局吧(源码下载在下面最后给出) 类似的自定义布局.下面我们就来详细介绍流式布局的应用特点以及用的的技术点: 1.流式布局的特点以及应用场景    特点:当上面一行的空间不够容纳新的TextView时候,    才开辟下一行的空间 原理图: 场景:主要用于关键词搜索或者热门标签等场景2.自定义ViewGroup,重点重写下面两个方法 1.o

安卓流式布局

一.流式布局效果 二.工程结构 三.新建工程,自定义GroupView(流式布局) package com.yuanlei.flowlayoutdemo; import android.content.Context; import android.util.AttributeSet; import android.util.Log; import android.view.View; import android.view.ViewGroup; import java.util.ArrayLi