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 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);
我再次表达对博客园的编辑器插入代码的不满。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.
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库