JY案例二:瀑布流布局页面(高度判断式)

通过计算列高度的方式展示瀑布流布局网页，达到均匀页面的效果，代码很少。 JY案例二:瀑布流布局页面(高度判断式)

作者：田想兵 博客地址:http://www.cnblogs.com/tianxiangbing

由于昨天写的那篇博文《JY案例一:瀑布流布局页面》，大家都对它不屑一顾，我本着不以为耻反以为荣的态度，决定写瀑布流的续集，我还就跟你们耗上了。昨天有观众说我写的只是像瀑布流，还达不到瀑布流的效果，让我看什么jquery实现的XX效果，我告诉你，我急眼了，我不跟外行计较！

在上一篇《JY案例一:瀑布流布局页面》里提到说，会遇到一个很严重的问题，就是当页面内容足够多了的时候，会出现严重的不对齐状况，因为我们没有办法计算它的高度，除非每次加载完后再进行一次重排。又有人说了，我们为什么没有办法得到它的高度呢？好，这个问题问得好，因为图片没加载完前是很难知道高度的，注意是很难，不是不能。方法可能会有如下几种：

本文案例请点击这里! 

1。后台返回图片高度

2。通过预加载图片得到高度

3。你猜你猜你猜猜猜

明显的，第一种更现实点，因为只要是站内图片，一般程序在上传的时候都会保存它的高度。 好，先看今天的效果图：

 

 这次出现了三列不均等数目了，所以它的底部会更均匀显示，具体演示页请猛击http://www.lovewebgames.com/demo/waterfall-height.html

好，来说说我的思路，首先，每一项，都要找到这N列中高度最短的那一列进行强势插入。 然后没了，好像这个要比昨天那个更简单些。本来打算今天做定位瀑布流的例子的，就是因为有观众觉得我昨天的那个不算瀑布流，所以又拖了一次，改日再说。

贴判断最小高度的代码：

for (var j=0;j<rl ;j++ ){
                var minColumn = JY.query(".waterfall_old ul:eq(0)")[0];
                var tmpH = JY.height(minColumn);
                for (var i =0,l=column; i<l ; i++ ){
                    var curColumn = JY.query(".waterfall_old ul:eq("+i+")")[0];
                    var curHeight = JY.height(curColumn);
                    if (curHeight < tmpH){
                        minColumn = curColumn;tmpH =curHeight;
                     }
                }} 

复杂吗？不复杂。比冒泡简单多了。然后就是插入到最小高度列:

                var tmp = document.createElement("li");
                tmp.innerHTML = '<img src="'+r[j].url+'" alt="'+r[j].text+'" height="'+r[j].height+'px"/><div>'+r[j].text+'</div>'  
;                         minColumn.appendChild(tmp);   我再次表达对博客园的编辑器插入代码的不满。

今天到此结束了，本文案例请点击这里! 如果您有任何的疑问，都不要来问我，请重复重复再重复的阅读本文或上篇博文。也可以加入我的扣扣群：70210212.              

 

标签：minColumn,JY,高度,案例,瀑布,var,页面
来源： https://blog.51cto.com/u_15255487/2860157