瀑布流,纵向
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 | /* 瀑布流封装 2016.4.27 by WJ @param containerId 容器ID @param nline 列数 @param nWidth 容器宽度 @param nBoxWidth 元素实际所占宽度 @param nMarginLeft 元素的margin @param nMarginTop 元素的margin @param getData function @param onFinish function */ function waterfall(containerId, nline, nWidth, nBoxWidth, nMarginLeft, nMarginTop, getData, onFinish) { var line = nline || 4, width = nWidth || 1180, boxWidth = nBoxWidth || 295, marginLeft = nMarginLeft || 0, marginTop = nMarginTop || 0; var i; var cache = []; //缓存当前读到的数据 var imgCache = [] //缓存图片数据 var index = 1; //第几组数据调用(页码) var flag = true ; //是否可读取数据(避免重复读取) //统计每列的当前高度 var lineArr = []; var lineArrBf = []; //备份 for (i = 0; i < line; i++) { lineArr.push(0); lineArrBf.push(0); } //最大值 Array.prototype.max = function () { return Math.max.apply({}, this ) } //最小值 Array.prototype.min = function () { return Math.min.apply({}, this ) } //ul容器 var container = document.getElementById(containerId); container.style.position = "relative" ; //缓存图片(将图片有序地加入数组,并触发图片加载) var printFall = function () { imgCache = [] for (i = 0; i < cache.length; i++) { var imagethis = new Image(); imagethis.onload = function () { chn( this ); } imagethis.onerror = function () { chn( this ); } imagethis.src = cache[i].c; imgCache.push(imagethis) } } //每张图片加载完成后都会触发本事件(输出元素到页面上) var chn = function (img) { var k = 0, j = 0, i = 0, m = 0, n = 0, temp; var li, liId, thisbox, liList, thisLiid, thisliIdNum; //标记本条数据的图片已加载完成 for (k = 0; k < cache.length; k++) { if (imgCache[k] === img) { temp = cache[k]; temp = { "a" : 1, "b" : temp.b, "c" : temp.c } cache[k] = temp; break ; } } var thisflag = true ; for (i = 0; i < cache.length; i++) { if (cache[i].a == 1) { li = document.createElement( "li" ); liId = "grid_" + index + "_" + i li.id = liId; li.innerHTML = cache[i].b; thisbox = document.getElementById(liId); if (!thisbox) { //读取本组的所有已输出的元素 liList = $( "li[id^='grid_" + index + "_']" ); for (m = 0, len = liList.length; m < len; m++) { thisLiid = liList[m].id; thisliIdNum = parseInt(thisLiid.split( '_' )[2]); if (thisliIdNum > i) { break ; } } if (m >= liList.length) { container.appendChild(li); fixLi(li); } else { //有序地插入队中 container.insertBefore(li, liList[m]); //调整本组元素的定位 //复位 for (n = 0; n < line; n++) { lineArr[n] = lineArrBf[n]; } //重铺 liList = $( "li[id^='grid_" + index + "_']" ); for (n = 0, len = liList.length; n < len; n++) { fixLi(liList[n]); } } } } else { thisflag = false ; } } //修改容器的高度 var maxLine = lineArr.max(); container.style.height = maxLine + 'px' ; if (thisflag && !flag) { //本组图片已全部完成加载 index++; cache = []; flag = true ; onFinish(); } } //调整元素位置 var fixLi = function (li) { var minLine, targetLine, j; //获取新元素的位置 minLine = lineArr.min(); //找到最短的一列的高度 targetLine = 0; //确认最短列的数组下标 for (j = 0; j < lineArr.length; j++) { if (minLine == lineArr[j]) { targetLine = j; break ; } } //填入队尾 li.style.top = lineArr[targetLine] + 'px' ; li.style.position = "absolute" ; li.style.left = targetLine * boxWidth + targetLine * marginLeft + 'px' ; lineArr[targetLine] += li.offsetHeight + marginTop; //修改数组的值 } //处理AJAX返回的数据 var processData = function (data, getSrc, getHtml) { if (data.length == 0) { if ($( "#" + containerId).html == "" ) { $( "#" + containerId).html( "内容正在采集中……" ); return false ; } } else { var html = "" var src = "" ; for (i = 0; i < line; i++) { lineArrBf[i] = lineArr[i]; } for ( var i = 0; i < data.length; i++) { src = getSrc(data[i]); html = getHtml(index, data[i], src); //a:0表示图片未完成缓存 cache.push({ "a" : 0, "b" : html, "c" : src }); } printFall(); } } //滚动事件 var myFunction = function () { if (flag) { var doc_height = $(document).height(); //屏幕下遮挡的页面高度 var hBelow = doc_height - $( this ).scrollTop() - $( this ).height(); var perc = hBelow / doc_height; //触发加载数据的条件 if (hBelow < 3000 || perc < 0.3) { flag = false ; getData(index, processData); } } } return myFunction; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | //调取瀑布流 $( function () { //加载数据时执行的操作 var getData = function (index, processData) { //图片链接 var getSrc = function (item) { return "/uploads/" + item.g_id + "/" + item.c_picurl1; } //li标签内的内容拼接 var getHtml = function (index, item, src) { var html = "" ; html += "<a href=\"/uploads/" + item.g_id + "/" + item.c_picurl2 + "\" class=\"fancyBox\">" ; html += "<img src=\"" + src + "\">" ; html += "<h3 title='" + item.c_info_title + "'>" + getLength(item.c_info_title, 15) + "</h3>" ; html += "</a>" ; return html } var para = {}; para[ "index" ] = index; para[ "kind" ] = parameter.k.k; para[ "action" ] = "list" ; $.ajax({ type: "post" , url: "cl/getCase.ashx" , data: para, dataType: "json" , success: function (data) { processData(data.Rows, getSrc, getHtml); }, error: function (msg) { //alert(msg); } }); }; //加载完成后执行的操作 var onFinish = function () { $( ".fancyBox" ).fancybox({ type: 'image' , openEffect: 'elastic' , closeEffect: 'elastic' , padding: 0, centerOnScroll: true , helpers: { title: { type: 'float' } } }); } var myfall = waterfall( 'coont' , 3, 860, 274, 14, 20, getData, onFinish); $(window).bind( "scroll" , myfall); myfall(); }); function getLength(str, i) { var s = str.toString(); if (s) { if (s.length > i) { return s.substring(0, i); } else { return s; } } else { return "" ; } } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!