传统界面的布局方式总是行列分明、坐落有序的，这种布局已是司空见惯，在不知不觉中大家都已经对它产生了审美疲劳。这个时候瀑布流布局的出现，就给人带来了耳目一新的感觉，这种布局虽然看上去貌似毫无规律，但是却...
分类：
移动开发 时间：
2016-10-19 09:57:57
阅读次数：
286
瀑布流布局学习 特点：等宽不等高。 实现方式：Javascript/Jquery/CSS3多栏布局。 样例网站：花瓣网-->分类（http://huaban.com/） 一、JS实现瀑布流 index.html:页面结构 View Code layout.css:页面元素样式 View Code w ...
分类：
其他好文 时间：
2016-10-14 16:53:18
阅读次数：
157
一、JS实现瀑布流 index.html:写死页面的img数据块 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>瀑布流布局</title> 6 <link rel="stylesheet ...
分类：
其他好文 时间：
2016-10-13 21:35:28
阅读次数：
180
JQ实现瀑布流图片定位 1、jQuery是继prototype之后又一个优秀的Javascript框架 2、$(window).width() 浏览器视窗的宽度 outerWidth() = padding+border+width; width() = width/*在jQuery中，width( ...
分类：
Web程序 时间：
2016-09-20 19:42:29
阅读次数：
196
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>waterfall</title> <link rel="stylesheet" href="style.css"> <script src="script.js"></scr ...
分类：
其他好文 时间：
2016-09-02 15:50:58
阅读次数：
226
一、总结： 首先是分清楚设计稿的结构，下面瀑布流布局首先是将容器分出三个有固定宽度的div，第一列多张图片的横向排列采用inline-block布局的方式，但是三列的横向显示只采用inline-block的布局方式，这里不是很尽如人意。后面两列还结合了position的方式定位才达到理想的效果。刚开 ...
分类：
其他好文 时间：
2016-08-05 23:06:17
阅读次数：
189
效果展示如下: 其中图片的宽度是一定的，高度随比例变换，以此为基础做瀑布流布局。 ...
分类：
其他好文 时间：
2016-07-19 23:52:59
阅读次数：
477
-webkit-column-width:100%; //列宽 -moz-column-width:100%;-o-colum-width:100%;colum-width:100%;-webkit-column-count: 2; //列数-moz-column-count: 2;-o-colum ...
分类：
其他好文 时间：
2016-06-27 13:43:22
阅读次数：
117
最近在Github上看到三个库,分别是
GSKStretchyHeaderView,CHTCollectionViewWaterfallLayout ,JZNavigationExtension，
其中第一个是给CollectionView添加可动画的头部，添加方式和内容非常丰富，第二个是
瀑布流布局，第三个是UINavigationController的导航栏扩展。这三个东西厉...
分类：
移动开发 时间：
2016-06-21 07:25:17
阅读次数：
323
