相对于电脑网页版瀑布流功能，手机版的不同在于手机屏幕较小，基本只能在水平方向排两列！同时，网页版多使用绝对定位来计算各个图片块的位置，使用的是px为单位！
在手机端如果考虑到手机分辨率兼容性的问题，则需要用em做单位，显然在绝对定位时会有麻烦，因为js获取的都是px单位的值（当然，appcan页面初始化时已经设定了px和em的比例值，如果不嫌麻烦，也可以每次去转换）！ 基于手机浏览的特性和局限，在此提供鄙人能想到的另外一种设计思路如下： 原理： 将屏幕划分为两栏，各占50%宽，那么在追加图片块时就不用考虑绝对定位的问题，直接在左右每个div里面追加图片块即可！然后在追加图片块时，首先获取左右两个div的高度，将最近一个图片块追加到高度小的那个即可！ 注意点： 手机由于网络原因，图片可能不能很快打开，那么在获取两侧div高度的时候就会出现问题，比如一个很高的图片100px高，但是由于图片还没有加载出来，那么那个图片块可能就只有20px的高度；所以，需要解决的问题就是：在图片还没有加载出来时，依然需要把图片块的高度撑开，故而，建议在服务器端返回数据时，将图片的高度值也返回，将这个高度赋值给该图片外dom对象的min-height值，这样，在图片未加载出来时，高度就已经撑开了！ 延生：
如果在appcan里面使用还可以结合到图片缓存使用！还可以使用lazyloader.js插件，达到图片位到显示位置不加载的效果！
是不是很简单？YES！ 源代码下载
在手机端如果考虑到手机分辨率兼容性的问题，则需要用em做单位，显然在绝对定位时会有麻烦，因为js获取的都是px单位的值（当然，appcan页面初始化时已经设定了px和em的比例值，如果不嫌麻烦，也可以每次去转换）！ 基于手机浏览的特性和局限，在此提供鄙人能想到的另外一种设计思路如下： 原理： 将屏幕划分为两栏，各占50%宽，那么在追加图片块时就不用考虑绝对定位的问题，直接在左右每个div里面追加图片块即可！然后在追加图片块时，首先获取左右两个div的高度，将最近一个图片块追加到高度小的那个即可！ 注意点： 手机由于网络原因，图片可能不能很快打开，那么在获取两侧div高度的时候就会出现问题，比如一个很高的图片100px高，但是由于图片还没有加载出来，那么那个图片块可能就只有20px的高度；所以，需要解决的问题就是：在图片还没有加载出来时，依然需要把图片块的高度撑开，故而，建议在服务器端返回数据时，将图片的高度值也返回，将这个高度赋值给该图片外dom对象的min-height值，这样，在图片未加载出来时，高度就已经撑开了！ 延生：
如果在appcan里面使用还可以结合到图片缓存使用！还可以使用lazyloader.js插件，达到图片位到显示位置不加载的效果！
是不是很简单？YES！ 源代码下载
解决方案 »
免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货