2117人阅读
［ Android自定义控件 ］（14）
转载请标明出处:
本文出自：
由于一些原因，马上就要离开现在这家公司，有解脱，也要感慨，在公司的这段时间学到很多东西，无论是技术上的、管理、产品，都有了很好的认识。做好自己，不要和他人比较，今天带来了的是自定义标签，除了标签的自定义，还有展示成瀑布流式的。
具体效果如下，项目下载地址在最下方。：
制作这个瀑布流式的自定义标签列表时，我们把它拆分成两部分，一是标签的自定义，二是瀑布流式的布局。
在这里，将整个瀑布流式的标签列表进行划分，如图：
从上图可以看出，外面是LinearLayout容器，排列方式是垂直，
内部是一个个LinearLayout，排列方式是水平，内部的LinearLayout就是用来存放我们的标签。
注意的是：内部的LinearLayout一行添加标签满时，我们就得进行换行，这时就需要我们去得到一行标签的总宽度，用整个容器的宽度减去一行标签的总宽度就可以得到剩余的宽度，拿剩余的宽度和即将添加标签的宽度进行判断是否需要换行。
标签的制作使用GradientDrawable作为TextView的背景，GradientDrawable允许设置矩形四个角为圆角，以及圆角的半径，因此优先使用GradientDrawable。
如何使用自定义的控件
这边的话先讲怎么使用我自定义的控件，顺便提一下合理的使用范型知识，可以使控件更有利于扩展。
由于业务的场景的不同，我们拿到数据类型个不相同，假如在游戏搜索页展示标签列表，定义一个GameLabel类，用于表示此场景下的标签信息：
package com.example.labellistproject.
* Linhai GU
public class GameLabel {
public String textC
public String backgroudC
public String strokeC
接着定义一个继承BaseLabelListView的类即可，如下：
package com.example.labellistproject.
import android.content.C
import android.util.AttributeS
import com.example.labellistproject.entity.GameL
import com.example.labellistproject.view.base.BaseLabelListV
public class LabelListView extends BaseLabelListView&GameLabel& {
public LabelListView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
public LabelListView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
public LabelListView(Context context) {
this(context, null);
public String getLabelName(GameLabel object) {
return object.
public String getTextColor(GameLabel object) {
return object.textC
public String getBackgroundColor(GameLabel object) {
return object.backgroudC
public String getStrokeColor(GameLabel object) {
return object.strokeC
GameLabel这个类就是不同场景下的标签信息，这里BaseLabelListView是个抽象的范型类，因此数据的扩展性是没有问题的。
我们看到继承BaseLabelListView这个抽象类后，重写了四个方法，四个方法的说明如下：
package com.example.labellistproject.
public interface ILabelInfo&T& {
* 标签内容
public String getLabelName(T object);
* 标签字体颜色
public String getTextColor(T object);
* 标签背景颜色
public String getBackgroundColor(T object);
* 标签外框颜色
public String getStrokeColor(T object);
到这里将我们的LabelListView 这个View加载到xml中去，以下是LabelListView 在xml中的用法：
&RelativeLayout xmlns:android="/apk/res/android"
xmlns:tools="/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" &
&com.example.labellistproject.view.LabelListView
android:id="@+id/label_list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp" &
&/com.example.labellistproject.view.LabelListView&
&/RelativeLayout&
接着在MainActivity中的用法：
package com.example.labellistproject
import java.util.ArrayList
import android.app.Activity
import android.os.Bundle
import android.widget.Toast
import com.example.labellistproject.entity.GameLabel
import com.example.labellistproject.inface.IOnItemClickListener
import com.example.labellistproject.view.LabelListView
import com.example.labellistproject.view.base.BaseLabelListView
public class MainActivity extends Activity {
private LabelListView mLabelListView
private ArrayList&GameLabel& labelList = new ArrayList&GameLabel&()
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
initDatas()
initViews()
initEvent()
private void initDatas() {
GameLabel label = new GameLabel()
label.name = "火影忍者"
label.textColor = "663300"
label.backgroudColor = ""
label.strokeColor = ""
labelList.add(label)
label = new GameLabel()
label.name = "土豆"
label.textColor = "009933"
label.backgroudColor = ""
label.strokeColor = ""
labelList.add(label)
label = new GameLabel()
label.name = "优酷"
label.textColor = "0033FF"
label.backgroudColor = ""
label.strokeColor = ""
labelList.add(label)
label = new GameLabel()
label.name = "爱奇艺"
label.textColor = "CC66FF"
label.backgroudColor = ""
label.strokeColor = ""
labelList.add(label)
label = new GameLabel()
label.name = "电影"
label.textColor = "339966"
label.backgroudColor = ""
label.strokeColor = ""
labelList.add(label)
label = new GameLabel()
label.name = "综艺"
label.textColor = "99CCFF"
label.backgroudColor = "FFCCCC"
label.strokeColor = ""
labelList.add(label)
label = new GameLabel()
label.name = "娱乐"
label.textColor = "FF3366"
label.backgroudColor = ""
label.strokeColor = ""
labelList.add(label)
label = new GameLabel()
label.name = "直播游戏"
label.textColor = "FF3333"
label.backgroudColor = ""
label.strokeColor = "00FFFF"
labelList.add(label)
label = new GameLabel()
label.name = "LOL英雄联盟"
label.textColor = "FF9933"
label.backgroudColor = "FFCCFF"
label.strokeColor = ""
labelList.add(label)
label = new GameLabel()
label.name = "顾林海"
label.textColor = "9966FF"
label.backgroudColor = ""
label.strokeColor = ""
labelList.add(label)
label = new GameLabel()
label.name = "生化危机"
label.textColor = "CC33FF"
label.backgroudColor = ""
label.strokeColor = ""
labelList.add(label)
label = new GameLabel()
label.name = "阿凡达"
label.textColor = "99CCFF"
label.backgroudColor = ""
label.strokeColor = ""
labelList.add(label)
label = new GameLabel()
label.name = "酷狗"
label.textColor = "0033CC"
label.backgroudColor = ""
label.strokeColor = ""
labelList.add(label)
label = new GameLabel()
label.name = "QQ音乐"
label.textColor = "FFCCCC"
label.backgroudColor = ""
label.strokeColor = ""
labelList.add(label)
label = new GameLabel()
label.name = "android教程"
label.textColor = "CC33FF"
label.backgroudColor = ""
label.strokeColor = ""
labelList.add(label)
label = new GameLabel()
label.name = "PHP教程"
label.textColor = "CC33FF"
label.backgroudColor = "FFCCCC"
label.strokeColor = ""
labelList.add(label)
label = new GameLabel()
label.name = "酷炫标签"
label.textColor = ""
label.backgroudColor = "339966"
label.strokeColor = ""
labelList.add(label)
label = new GameLabel()
label.name = "一只苹果"
label.textColor = "FF3399"
label.backgroudColor = ""
label.strokeColor = ""
labelList.add(label)
label = new GameLabel()
label.name = "刘德华"
label.textColor = "339966"
label.backgroudColor = ""
label.strokeColor = ""
labelList.add(label)
private void initViews() {
mLabelListView = (LabelListView) findViewById(R.id.label_list_view)
mLabelListView.setSize(25)
mLabelListView.setData(labelList)
private void initEvent() {
mLabelListView.setOnClickListener(new IOnItemClickListener() {
public void onClick(String name, int position) {
Toast.makeText(MainActivity.this,
"标签内容：" + name + "
位置:" + position,
Toast.LENGTH_SHORT).show()
用法非常简单，标签的各种颜色以及大小，都可以订制，是不是很方便。
瀑布流式标签代码讲解
如何能实现以下的效果呢？这里先从制作标签开始，没一个标签都是一个TextView，我们给TextView是背景设置成GradientDrawable。
以下是制作标签的类：
package com.example.labellistproject.view.
import android.content.C
import android.graphics.C
import android.graphics.drawable.GradientD
import android.text.TextU
import android.util.TypedV
import android.widget.TextV
* 标签制作
* Linhai Gu
public class GradientTextView {
private GradientDrawable mGradientD
private TextView mLabelTextV
private Context mC
public GradientTextView(Context _context) {
this.mContext = _
mGradientDrawable = new GradientDrawable();
mLabelTextView = new TextView(mContext);
initGradientDrawable();
initLabelTextView();
* 初始化GradientDrawable
private void initGradientDrawable() {
mGradientDrawable.setColor(mContext.getResources().getColor(
android.R.color.white));
mGradientDrawable.setCornerRadius(dip2px(1));
mGradientDrawable.setStroke(dip2px(1), mContext.getResources()
.getColor(android.R.color.holo_blue_light));
mGradientDrawable.setAlpha(128);
* 初始化标签
private void initLabelTextView() {
mLabelTextView.PLEX_UNIT_PX, 20);
mLabelTextView.setPadding(dip2px(5), dip2px(4), dip2px(4), dip2px(5));
* dipValue
private int dip2px(float dipValue) {
final float scale = mContext.getResources().getDisplayMetrics().
return (int) (dipValue * scale + 0.5f);
* 是否为空
private boolean empty(String str) {
return TextUtils.isEmpty(str);
* 转换成颜色值
private int parseColor(String color) {
return Color.parseColor("#" + color);
* 标签字体颜色
public GradientTextView setTextColor(String color) {
if (!empty(color)) {
mLabelTextView.setTextColor(parseColor(color));
} catch (Exception e) {
return this;
* 标签背景颜色
public GradientTextView setBackgroundColor(String color) {
if (!empty(color)) {
mGradientDrawable.setColor(parseColor(color));
return this;
* 标签外框颜色
public GradientTextView setStrokeColor(String color) {
if (!empty(color)) {
mGradientDrawable.setStroke(dip2px(1), parseColor(color));
return this;
public GradientTextView setStrokeRadius(int radius) {
mGradientDrawable.setCornerRadius(dip2px(radius));
return this;
* 设置标签内容
public GradientTextView setLabelText(String info) {
if (!empty(info)) {
mLabelTextView.setText(info);
return this;
public GradientTextView setTextSize(int size) {
mLabelTextView.PLEX_UNIT_PX, size);
return this;
* 构造TextView
public TextView build() {
mLabelTextView.setBackgroundDrawable(mGradientDrawable);
return mLabelTextV
代码非常简单，给TextView和GradientDrawable设置参数，最后通过build方法返回制作好的标签(TextView)。
接着编写瀑布流式的布局，上面原理讲解时已经说过了，外面是一个垂直的LinearLayout，内部是一个个垂直的LinearLayout，内部的LinearLayout是水平排列的，用于标签的排列。
因此写个继承LinearLayout的类，我们这里称为BaseLabelListView：
public abstract class BaseLabelListView&T& extends LinearLayout implements
ILabelInfo&T& {
ILabelInfo是一个范型接口，内部定义了一些方法，用于在BaseLabelListView的子类中去实现的，方便我们的订制。
外部的LinearLayout是垂直的，因此需要进行设置：
public BaseLabelListView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
this.mContext =
public BaseLabelListView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
public BaseLabelListView(Context context) {
this(context, null);
private void init() {
this.setOrientation(LinearLayout.VERTICAL);
设置完整个容器的排列方式后，就需要我们标签的添加了。
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
groupWidth = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();
if (groupWidth & 0 && isFirst) {
isFirst = false;
addLabelList(mDatas);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
重新onMeasure方法，获取我们的容器的宽度，之后进行标签的添加，addLabelList就是标签添加的方法。
* 添加标签列表
private void addLabelList(final List&T& datas) {
remainWidth = groupW
if (groupWidth & 0) {
Paint paint = new Paint();
removeAllViews();
LinearLayout layout = new LinearLayout(mContext);
TextView labelT
layout.setOrientation(LinearLayout.HORIZONTAL);
addView(layout);
for (int i = 0, length = datas.size(); i & i++) {
final T data = datas.get(i);
final int position =
labelText = createLabel(data, i);
paint.setTextSize(labelText.getTextSize());
final int itemPadding = labelText.getCompoundPaddingLeft()
+ labelText.getCompoundPaddingRight();
final float itemWidth = paint.measureText(getLabelName(data))
labelText.setText(getLabelName(data));
if (remainWidth & itemWidth) {
* 一行剩余空间大于添加标签的宽度，说明可以继续往一行添加
layout.addView(labelText);
* 如果一行已经添加不了，就另起一行继续添加标签
layout = new LinearLayout(mContext);
layout.addView(labelText);
addView(layout);
params = (LayoutParams) layout.getLayoutParams();
params.setMargins(0, itemTopMargins, 0, 0);
remainWidth = groupW
params = (LayoutParams) labelText.getLayoutParams();
params.setMargins(itemMargins, 0, itemMargins, 0);
remainWidth = (int) ((remainWidth - itemWidth + 0.5f) - itemMargins * 2);
以上代码的整体逻辑就是：
在每次加载标签时，进行容器的清空。
创建内部的LinearLayout，设置为水平排列，并添加到容器中。
通过循环操作，创建标签，获取标签宽度，并获取到一行标签宽度（累加），用容器的宽度减去一行标签的宽度，得到剩余的宽度，之后与添加标签的宽度比较一下，如果剩余宽度小于标签宽度，说明这行已经容纳不下这个标签了，这时应该换行，重新创建LinearLaoyt并添加到垂直排列的容器中去。
* 创建标签
* position
private TextView createLabel(final T data, final int position) {
TextView labelText = new GradientTextView(mContext)
.setTextColor(getTextColor(data))
.setBackgroundColor(getBackgroundColor(data))
.setStrokeColor(getStrokeColor(data)).setStrokeRadius(radius)
.setTextSize(textSize).build();
labelText.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
mIOnItemClickListener.onClick(getLabelName(data), position);
return labelT
标签的创建很简单，最后通过build获取标签，通过接口回调标签内容和位置。
以下是BaseLabelListView类的全部代码：
package com.example.labellistproject.view.
import java.util.ArrayL
import java.util.L
import android.content.C
import android.graphics.P
import android.util.AttributeS
import android.view.V
import android.widget.LinearL
import android.widget.TextV
import com.example.labellistproject.inface.ILabelI
import com.example.labellistproject.inface.IOnItemClickL
* 瀑布流标签的基类，所有业务类的标签样式继承BaseLabelListView
Administrator
public abstract class BaseLabelListView&T& extends LinearLayout implements
ILabelInfo&T& {
private Context mC
* 接口监听
private IOnItemClickListener mIOnItemClickL
private List&T& mDatas = new ArrayList&T&();
* 标签间的横向间距
private int itemMargins = 10;
* 标签间的纵向间距
private int itemTopMargins = 10;
* 文字大小
private int textSize = 30;
* 圆角度数
private int radius = 2;
private boolean isFirst = true;
public BaseLabelListView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
this.mContext =
public BaseLabelListView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
public BaseLabelListView(Context context) {
this(context, null);
private void init() {
this.setOrientation(LinearLayout.VERTICAL);
* 添加数据
public void setData(List&T& _datas) {
mDatas.clear();
mDatas.addAll(_datas);
int groupW
int remainW
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
groupWidth = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();
if (groupWidth & 0 && isFirst) {
isFirst = false;
addLabelList(mDatas);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
* 添加标签列表
private void addLabelList(final List&T& datas) {
remainWidth = groupW
if (groupWidth & 0) {
Paint paint = new Paint();
removeAllViews();
LinearLayout layout = new LinearLayout(mContext);
TextView labelT
layout.setOrientation(LinearLayout.HORIZONTAL);
addView(layout);
for (int i = 0, length = datas.size(); i & i++) {
final T data = datas.get(i);
labelText = createLabel(data, i);
paint.setTextSize(labelText.getTextSize());
final int itemPadding = labelText.getCompoundPaddingLeft()
+ labelText.getCompoundPaddingRight();
final float itemWidth = paint.measureText(getLabelName(data))
labelText.setText(getLabelName(data));
if (remainWidth & itemWidth) {
* 一行剩余空间大于添加标签的宽度，说明可以继续往一行添加
layout.addView(labelText);
* 如果一行已经添加不了，就另起一行继续添加标签
layout = new LinearLayout(mContext);
layout.addView(labelText);
addView(layout);
params = (LayoutParams) layout.getLayoutParams();
params.setMargins(0, itemTopMargins, 0, 0);
remainWidth = groupW
params = (LayoutParams) labelText.getLayoutParams();
params.setMargins(itemMargins, 0, itemMargins, 0);
remainWidth = (int) ((remainWidth - itemWidth + 0.5f) - itemMargins * 2);
* 创建标签
private TextView createLabel(final T data, final int position) {
TextView labelText = new GradientTextView(mContext)
.setTextColor(getTextColor(data))
.setBackgroundColor(getBackgroundColor(data))
.setStrokeColor(getStrokeColor(data)).setStrokeRadius(radius)
.setTextSize(textSize).build();
labelText.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
mIOnItemClickListener.onClick(getLabelName(data), position);
return labelT
* 设置字体大小
public void setSize(int size) {
this.textSize =
* 设置标签圆角
public void setStrokeRadius(int radius) {
this.radius =
* 设置监听事件
public void setOnClickListener(IOnItemClickListener listener) {
this.mIOnItemClickListener =
以下是完整的github项目地址
github项目源码地址：
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：415361次
积分：7074
积分：7074
排名：第3335名
原创：203篇
译文：24篇
评论：122条
做从未做的事，叫成长；做不愿做的事，叫改变；做不敢做的事，叫突破。在学习中成长，在正向里改变，在尝试时突破，给人生一次变好的机会。生命，要用智慧驾驭，用从容相随，用简单诠释，用自由概括，用快乐装饰，用希望照耀，用成功证明，用心灵体验，或许凡俗但真实，或许平庸但挚诚。
文章：15篇
阅读：45713
文章：38篇
阅读：38101
文章：76篇
阅读：157908
文章：18篇
阅读：30317
阅读：9351
(window.slotbydup = window.slotbydup || []).push({
id: '4740881',
container: s,
size: '200,200',
display: 'inlay-fix'展开全部下一篇：开放式厨房敞亮大气，而且便于家人沟通互动，有更好的和谐温馨家居氛围，而闭合式厨房虽然传统老套，但是它实际又实用，光是能避免油烟飘出去污染其他魔天记手游中依照神通搭配的不同衍生出不同的流派，像是污染流、坚韧流等等，今天我们带来的是魔天记手游眩晕流打法攻略详解，告诉大家魔天记手游眩晕简约的北欧风或者日式风装修风格成为近年来的趋势，虽然这两种风格的特点都是主打简约，但是在笔者看来他们也各有特点：北欧风注重整体布局上的简约，在空间布局上韩式风格体现出日式的倾向，讲究空间的层次感， 依据住宅使用人数和私密程度不同，使用屏风或木隔段作为分隔尺寸。日式与宜家风格的特点传统日式风格，几幅传统日式装饰画或者日式印花，就能让人一眼看出这是日式风格。先导阀门的种类有非常的多，如弹簧微启式、脉冲式或者先导式;今天小编想要来给大家介绍一下的就是先导式的安全阀门。相对于普通的立式空调或者挂式空调而言，中央空调不仅仅舒适程度更加高，而且使用操作方面看来更加比较方便，但是相对而言它的报价也会比较高，所以并如今，我们手机的耳机有多种多样，一般来说佩戴方式主要有入耳式、头戴式或者耳塞式等等。现在的一般居室都是公寓式或者小区式的住房，这样的住房虽然少了房子的独特性，但是就对于现在住房的大量需求，这样的房屋类型显然适合更多的人。不管居室面积的大与小，家中总是却不了一款舒适的沙发，布艺的也好，皮艺的也好，亦或者是皮布结合的，总之沙发在我们的日常生活中扮演着极为重要的作js实现瀑布流的三种方式比较
作者：jingwhale
字体：[ ] 类型：转载 时间：
瀑布流，又称瀑布流式布局，是比较流行的一种网站页面布局，这篇文章主要介绍了js实现瀑布流的三种方式，感兴趣的小伙伴们可以参考一下
瀑布流是一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。
瀑布流特点：
1、琳琅满目：整版以图片为主，大小不一的图片按照一定的规律排列。
2、唯美：图片的风格以唯美的图片为主。
3、操作简单：在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前。
瀑布流布局实现方式：
1、传统多列浮动
· 各列固定宽度，并且左浮动；
· 一列中的数据块为一组，列中的每块依次排列；
· 更多数据加载时，需要分别插入到不同的列中；
&&&&& 布局简单，应该说没啥特别的难点；
&&&&& 不用明确知道数据块高度，当数据块中有图片时，就不需要指定图片高度。
&&&&& 列数固定，扩展不易，当浏览器窗口大小变化时，只能固定的x列，如果要添加一列，很难调整数据块的排列；
&&&&& 滚动加载更多数据时，还要指定插入到第几列中，还是不方便。
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&传统多列浮动&/title&
margin: 5px 5px 5px 5
background: #90EE90;
text-align:
&p style="height:230"&a1&/p&
&p style="height:100"&a2&/p&
&p style="height:100"&a3&/p&
&p style="height:300"&a4&/p&
&p style="height:250"&a5&/p&
&p style="height:200"&a6&/p&
2、CSS3 样式定义
&&&&& 直接 CSS 定义，最方便了；
&&&&& 扩展方便，直接往容器里添加内容即可。
&&&&& 只有高级浏览器中才能使用；
&&&&& 还有一个缺点，他的数据块排列是从上到下排列到一定高度后，再把剩余元素依次添加到下一列，这个本质上就不一样了；
&&&&& 鉴于这两个主要缺点，注定了该方法只能局限于高端浏览器，而且，更适合于文字多栏排列。
&!DOCTYPE HTML&
&meta http-equiv="Content-Type" content="text/ charset=utf-8"&
&title&CSS3瀑布布局&/title&
.container{
-webkit-column-width:160
-moz-column-width:160
-o-colum-width:160
-webkit-column-gap:1
-moz-column-gap:1
-o-column-gap:1
div:not(.container){
-webkit-border-radius:5
-moz-border-radius:5
border-radius:5
background:#90EE90;
border::#CCC 1
display:inline-
line-height:80 font-size:18 color:#999;
text-align:
font-family:"Microsoft YaHei";
&div class="container"&
&div style="height:80px" class="title"&纯CSS3瀑布布局&/div&
&div style="height:260px"&&/div&
&div style="height:65px"&&/div&
&div style="height:120px"&&/div&
&div style="height:145px"&&/div&
&div style="height:90px"&&/div&
&div style="height:145px"&&/div&
&div style="height:160px"&&/div&
&div style="height:65px"&&/div&
&div style="height:230px"&&/div&
&div style="height:140px"&&/div&
&div style="height:85px"&&/div&
&div style="height:20px"&&/div&
&div style="height:145px"&&/div&
&div style="height:50px"&&/div&
&div style="height:65px"&&/div&
&div style="height:230px"&&/div&
&div style="height:140px"&&/div&
&div style="height:85px"&&/div&
&div style="height:20px"&&/div&
&div style="height:145px"&&/div&
&div style="height:50px"&&/div&
&div style="height:145px"&&/div&
&div style="height:160px"&&/div&
&div style="height:240px"&&/div&
&/section&
3、绝对定位
&&&&& 最优的一种方案，方便添加数据内容，窗口变化，列数/数据块都会自动调整；
&&&&& 方便添加数据内容，窗口变化，列数/数据块都会自动调整；
&&&&& 需要实现知道数据块高度，如果其中包含图片，需要知道图片高度；
&&&&& JS 动态计算数据块位置，当窗口缩放频繁，可能会狂耗性能。
1) 数据块排列（对容器中已有元素进行排列），算法步骤简述下：
设置（块元素宽度一致）
· 初始化时，对容器中已有数据块元素进行第一次计算，需要用户给定: a，容器元素 — 以此获取窗口总宽度； b，列宽度（块元素宽度）； c，最小列数；
·计算显示列数：窗口宽度除以一个块框宽度向下取整，并设置waterfall显示的居中
·存储每列的高度
· 获得列数后，需要保存每个列的当前高度，这样在添加每个数据块时，才知道起始高度是多少；
· 依次取容器中的所有数据块，先寻找当前高度最小的某列，之后根据列序号，确定数据块的left，top值，left 为所在列的序号乘以列宽，top 为所在列的当前高度，最后更新所在列的当前高度加上这个数据块元素的高度，至此，插入一个元素结束；
· 当所有元素插入完毕后，调整容器的高度为各列最大的高度值，结束依次调整。
2) 异步加载数据，包含两个步骤：
· 绑定滚动事件，并确定预加载线高度值，即滚动到哪个高度后，需要去加载数据，其实这个就是列的最小高度值，这样当前滚动值和最小高度值比较一下即可判断出来，是否要触发加载数据；
· 加载数据，函数传参，能提供加载数据函数和停止加载（加载多少时停止）函数，以更方便的控制。
以上就是本文的全部内容，希望对大家的学习有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具