-
原理：通过计算和绝对定位的方式固定图片位置。 特点：等宽不等高/参差不齐。 使用padding而不是margin：获取数据块高度，不仅数据块本身高度，还包括数据块间的距离；offsetHeight可以获取padding，但不能获取margin。查看全部
-
获取父元素下指定类名元素。 1、创建数组 2、获取父元素下所有标签 3、遍历所有标签，若类名恰好与要查找的类名，则加入数组查看全部
-
三种方法实现瀑布流布局查看全部
-
JQ方案完整版：查看全部
-
CSS3方式的优缺点： 1、浏览器自动计算列数，只要设置列宽； 2、列宽随窗口大小而改变； 3、图片垂直排列； 4、图片加载依然需要JS。查看全部
-
JS方式的优缺点： 1、需要计算列数； 2、横向、顺序显示图片。查看全部
-
CSS3多栏布局实现图片布局查看全部
-
JQ版动态加载图片： $(window).on("scroll", function(){ if(checkScrollSlide){ $.each(json.images, function(key, val){ var box = $("<div>").addClass("box").appendTo($("#main")), pic = $("<div>").addClass("pic").appendTo(box); // 注意把JS原生对象val转换为JQ对象 $("<img>").attr("src", "images/"+$(val).attr("src")).appendTo(pic); }); waterfall(); } });查看全部
-
JQ版检查是否满足了触发waterfall的条件： function checkScrollSlide(){ var parent = $("#main"), boxs = parent.find(".box"), lastBox = boxs.last(), lastBoxH = lastBox.offset().top + Math.floor(lastBox.outerHeight() / 2), // 最后一个数据块露出一半高度 sTop = $(window).scrollTop(), // 获取被卷去的高度 winH = $(window).height(); // 获取视窗高度 return (lastBoxH < sTop + winH); }查看全部
-
JQ版图片定位： function waterfall(){ var parent = $("#main"), boxs = parent.find(".box"), boxW = boxs.eq(0).outerWidth(), col = Math.floor($(window).width() / boxW), hs = []; parent.width(boxW * col).css("margin", "0 auto"); boxs.each(function(idx, val){ var bx = $(val), // 注意这里需要把DOM对象val转换为JQ对象 minH = 0, minHIdx = 0; if(idx < col){ hs.push(bx.outerHeight()); } else{ minH = Math.min.apply(null, hs); minHIdx = $.inArray(minH, hs); bx.css({ "position": "absolute", "top": minH + "px", "left": (minHIdx * boxW) + "px" }); hs[minHIdx] = minH + bx.outerHeight(); } }); }查看全部
-
瀑布流布局JS方案：查看全部
-
getElementsByClassName的兼容方案查看全部
-
1、数据块的信息应从后台用JSON传过来 2、动态创建的div.box、div.pic等未自动进行left和top计算，需要再次调用waterfall函数查看全部
-
检查是否具备了加载数据块的条件：判断最后一个数据块是否已到达视窗（露出的面积自定义）查看全部
-
图片排序： for(var i=0; i<oBoxs.length; i++){ if(i<cols){ 1、获取第一列各数据块至页面顶部的距离： hArr.push(oBoxs[i].offsetHeight); } else{ 2、取出各offsetHeight中的最小值： var minH = Math.min.apply(null, hArr); 3、设置第第一列以外的数据块的left值： var idx = getMinHIndex(hArr, minH); oBoxs[i].style.position = "absolute"; oBoxs[i].style.top = minH + "px"; // oBoxs[i].style.left = w * idx + "px"; oBoxs[i].style.left = oBoxs[idx].offsetLeft + "px"; 4、重置各offsetHeight中的最小值 hArr[idx] += oBoxs[i].offsetHeight; } }查看全部
举报
0/150
提交
取消