用position: absolute布局,而后计算top,leftcss
首先,将容器分红几列,记录高度node
往最矮的列添加一个item服务器
以上的都是很简单的实现思想,而今天的重点是item涉及图片的时候,或者有懒加载状况下的瀑布流。app
由于在这样的状况下,item的高度多是不定的,由于加载图片的高度是不定的,因而怎么样获取item的高度就是一个难题布局
最简单的方法就是后台传输数据this
我参考了一下,花瓣网 http://huaban.com/ 它的作法是这样的spa
服务器访问页面的时候,把几个文件拼接输出(根据个人观察有(1)公用页面(2)系统配置(3)引入的js(4)页面数据(5)页面收尾)prototype
在(4)页面数据中,他就有了图片的宽高,跟一系列能够拼接成一个item的数据。在加载的时候,根据这些初始数据加载输出,其中图片的大小符合某种比例的话就有最大高度的限制,否则图片就按照图片高度输出code
如下的是我没有控制图片高度的一个瀑布流实现代码图片
var waterfall = (function(){ // console.clear(); waterfall(); function waterfall(id) { var id = id || 'app-content-scroll'; var parentlist = $('.' + id); parentlist.each(function() { var count = 0; var parent = $(this); var timer = setInterval(function(){ if(parent.children('section').length > 0) { // 如今有一个小小的bug // 就是图片没有加载完的时候,高度是会变的 // 这会形成对这个元素的预估失准 // 打算在懒加载上面作图片的高度赋值 var wf = new WaterFall(parent); $(window).bind('resize',function() { wf.col = Math.floor($(parent).width() / (wf.wid + wf.spa)) - 1; wf.init(); }); wf.parent.children('section').css('transition', 'all 0.2s ease'); clearTimeout(timer); } else if(count > 100) { clearTimeout(timer); } count++; },100); }); } function WaterFall(parent) { this.parent = parent; this.child = parent.children('section'); this.spa = 15; // 空元素 this.col = 0; this.wid = 0; this.colLen = []; this.init(); } WaterFall.prototype = { init: function() { var obj = this; obj.colLen = []; obj.wid = obj.child[0].offsetWidth; obj.col = Math.floor(obj.parent.width() / (obj.wid + obj.spa)); for (var i = 0; i < obj.col; i++) { obj.colLen.push(0); }; for (var i = 0; i < obj.child.length; i++) { obj.push(obj.child[i]); }; // 添加加载更多 obj.loadmore(); return obj.child; }, push: function(elem){ var index = 0; var elem = $(elem); var min = this.colLen[0]; for (var i = 1; i < this.col; i++) { if(min > this.colLen[i]) { min = this.colLen[i]; index = i; } }; var top = this.colLen[index] + this.spa; var left = (this.spa + this.wid) * index + this.spa; elem.css({ 'top': top, 'left': left }); this.colLen[index] += elem.height() + this.spa; }, loadmore: function() { var obj = this; var max = -1; var node = obj.parent.find('.app-loadmore'); for (var i = obj.child.length - 1; i >= obj.child.length - 1 - obj.col; i--) { if(obj.child[i] && obj.child[i].height > max) max = obj.child[i].height(); }; max += Math.max.apply(Math,this.colLen); max = Math.max(max, obj.parent.parent().height()); node.css('top', max); obj.parent.height(max); } }; return waterfall; })();