/** * 源码片段 * 自定义的ScrollView,在其中动态地对图片进行添加。 *  * @author guolin */public class MyScrollView extends ScrollView implements OnTouchListener {     /**&nbs
转载 精选 2015-07-25 10:20:37
725阅读
想必大家已经对互联网传统的照片布局方式司空见惯了,这种行列分明的布局虽然对用户来说简洁明了,但是长久的使用难免会产生审美疲劳。现在网上流行一种叫做“瀑布”的照片布局样式,这种行与列参差不齐的状态着实给用户眼前一亮的感觉,这种不规则的方式也吸引着我,现在我们就来一起实现它吧 :)首先我们来看一下这种...
转载 2015-11-18 10:25:00
179阅读
图片瀑布可以节省图片的排版空间,美观图片的排列,避免图片排列的参差不齐。 实现图片瀑布可以固定宽(花瓣),也可以固定高(百度图片),看个人需求,我的需求是宽固定。 如果图片的排列不适用瀑布的话,排版如下: 是不是特别的难以接受,的确,自己都无法接受,更别说展示给他人观看了。 如果使用瀑布,排版如下: 那可真是天差地别啊,如此美观的排列,简直让人心情愉悦。 图片瀑布代码:HTML<d
能够想象的出,不规则的瀑布照片是ScrollView内嵌一个横向的LinearLayout再内嵌三个纵向的LinearLayout。 假设不停地往LinearLayout里加入图片。程序非常快就会OOM。因此我们还须要一个合理的方案来对图片资源进行释放,这里仍然是准备使用LruCache算法 Tr
转载 2016-02-27 08:11:00
258阅读
2评论
传统界面的布局方式总是行列分明、坐落有序的,这种布局已是司空见惯,在不知不觉中大家都已经对它产生了审美疲劳。这个时候瀑布流布局的出现,就给人带来了耳目一新的感觉,这种布局虽然看上去貌似毫无规律,但是却有一种说不上来的美感,以至于涌现出了大批的网站和应用纷纷使用这种新颖的布局来设计界面。记得我在之前已经写过一篇关于如何在Android上实现照片功能的文章了,但那个时候是使用的GridView来进行
转载 2013-09-06 21:19:00
68阅读
2评论
传统界面的布局方式总是行列分明、坐落有序的,这种布局已是司空见惯,在不知不觉中大家都已经对它产生了审美疲劳。这个时候瀑布流布局的出现,就给人带来了耳目一新的感觉,这种布局虽然看上去貌似毫无规律,但是却有一种说不上来的美感,以至于涌现出了大批的网站和应用纷纷使用这种新颖的布局来设计界面。记得我在之前已经写过一篇关于如何在Android上实现照片功能的文章了,但那个时候是使用的GridView来进行
转载 精选 2014-07-10 22:55:53
820阅读
转载请注明出处:://blog..net/guolin_blog/article/details/10470797传统界面的布局方式总是行列分明、坐落有序的,这种布局已是司空见惯,在不知不觉中大家都已经对它产生了审美疲劳。这个时候瀑布流布局的出现,就给人带来了耳目一新的感觉,这种布局...
转载 2015-08-02 19:22:00
56阅读
2评论
e/details/10470797传统界面的布局方式总是行列分明、坐落有序的,这种布局已是司空见惯,在不知不觉中大家都已经对它产生了审美疲劳。这个时候瀑布流布局的出...
转载 2021-12-16 15:59:02
704阅读
最近看到一篇使用vue从零开始手写一个猫咪瀑布组件(支持ssr),讲了关于如何用 Vue 来实现瀑布,学习后自己动手写了一个简单的 demo。源码瀑布又称瀑布流式布局,是比较流行的一种网站页面布局方式,每张图片的宽度都设置为一样,但是高度是根据内容变化的,实现一个不规则的排列。原理原理其实很简单,简单来说就是把每张图都设置为绝对定位,再根据宽高设置图片的偏移值,则 left 和 top 属性
 瀑布作为当前比较流行的一种网页布局方式,在视觉上呈现出参差不齐、琳琅满目、唯美的视觉效果,该布局随着页面滚动,数据不断加载并附加至当前页面的尾部。这篇文章主要介绍关于vue框架中常使用的瀑布组件,大家根据需求来进行选择。一、vue-waterfallwaterfall是一个vue.js瀑布流布局组件,基于vue2.x 安装:npm install --save vue-w
转载 2023-07-27 13:18:45
193阅读
一直以来,习惯了jquery的DOM操作方式,突然间,开始学习使用vuejs,很多时候,操作DOM观念总是转换不过来,虽然也能实现各种效果,但是总有点不伦不类的。就类似于最近在做的瀑布流布局,正常的方式完成,并且上线之后,作为练手,也使用vuejs来走了一趟。需求:瀑布流布局照片使用了SUI-Mobile结合vuejs。实现过程:  <div class="waterfalls">
尝试过几个瀑布插件,这个插件还挺好用的。1. npm安装npm install vue-waterfall-easy --save-dev2. 直接看demo效果吧...<template> <div id="wrap"> <!-- 三、vue-virtual-collection
最近项目要实现一个瀑布流布局,结合网上的案例以及自己的理解实现了一版,特在此记录一下,有兴趣的同学欢迎一起探讨交流学习  (第一次写这种东西~~~),废话不多说,开整!!!!!先上张图!!!【必看】原理:       说一下我对瀑布流布局原理的理解,如上图,实现这种布局方式,主要有绝对定位方式 以及两列布局方式,原理都是通过判断每列高度差来做,重新
前言 KISSY是由阿里集团前端工程师们发起创建的一个开源 JS 框架。它具备模块化、高扩展性、组件齐全,接口一致、自主开发、适合多种应用场景等特性。本人在一次项目中层使用这个uploader组件。 关于kissy uploader: Uploader是非常强大的异步文件上传组件,支持ajax、iframe、flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持和常用插件,比如验证、图片预览、进度条等。广泛应用于淘宝网,比如退款系统、爱逛街、二手、拍卖、我的淘宝、卖家中心、导购中心等。拥有非常不错的扩展性,可以自己定制主题和插件。 uploader的特性: 支持aja...
转载 2013-08-08 10:37:00
85阅读
2评论
vue环境简单实现动态瀑布效果 最近开发项目需要实现动态瀑布效果,项目本身是vue环境,网上很难找到类似的效果,vue-waterfall插件,懂的都懂。看了源码就知道不符合我项目目前的场景。(列表是循环渲染,高度不能提前预知也不能提前获取到,因此该组件是用不了的。—看了waterfall组件示例源码的小伙伴应该清楚)。 除了waterfall,其次就是用原生js写了。但是我不想用原生js写
转载 2023-08-25 19:50:05
60阅读
前言瀑布流布局是什么呢?应用于什么场景呢? 简单描述一下,就是,瀑布流布局就是宽度一致,但是高度不限定死,最终通过算法排列,使得布局出现一种上下交错显示的感觉,看起来像是瀑布一样。 应用场景:可以说非常多了,比如最常见的淘宝,蘑菇街等都是瀑布流布局 做前端的肯定都会遇到这种情况需要使用瀑布流布局 那么今天我就专门整理一个好用的瀑布流布局实现方法 以后小伙伴们在需要做到这个布局的时候可以直接来着复制
介绍 前端加分项目来了!!!这篇文章主要介绍,企业级网站页面瀑布流布局的实现,主要包括:瀑布是什么瀑布的实现原理瀑布的使用场景瀑布的的实现有哪些问题&如何解决可扩展使用场景瀑布是什么都2020了,接水怪居然还不知道瀑布?我错了,我该打!!! 瀑布, 又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为宽度相等高度不定的元素组成的参差不齐的多栏布局,随着页面向下滚动,
转载 2024-08-08 07:50:12
122阅读
相机瀑布 自动随机放大 Jquery 在前端开发中,创建一个相机瀑布并能自动随机放大图片的功能,是一个既美观又增强用户体验的效果。本文将通过详细的步骤,教你如何使用Jquery实现这一目标。 ## 环境准备 - **软硬件要求**: - 操作系统:Windows / macOS / Linux - 浏览器:Chrome / Firefox / Safari(最新版) -
原创 6月前
7阅读
Watefall即Chrome的瀑布,可以看到请求花费时间具体到了那些部分,就是将一次HTTP请求所花的时间做了拆解,从而有助于分析和定位问题所在。瀑中有好几种颜色:浅灰,深灰,橙色,绿色,蓝色结合上面的解释,大概知道这些颜色代表的含义了:浅灰:查询中深灰:停滞,代理转发,请求发送橙色:初始连接绿色:等待中蓝色:内容下载瀑布图提供了三个直观的东西来帮助我们进行前端性能优化首先,减少所有资源的加载
转载 2023-10-20 10:08:03
57阅读
前面写过vuejs实现的瀑布流布局,《vuejs实现瀑布流布局(一)》和《vuejs实现瀑布流布局(二)》也确实实现了瀑布流布局,但是这个是基于SUI-Mobile实现的无限滚动。近日稍有空闲,回头重新实现了一下移动端的瀑布流布局,摆脱了移动端UI框架的束缚。移动端的适配,采用的是adaptive-version2.js,而无限加载采用的是Vue Scroller。最终实现的效果大致如下:&nbs
  • 1
  • 2
  • 3
  • 4
  • 5