为什么我用js添加内容,最后用offsetHeight获取的高度只有81,不能实现效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> < html > < head > < meta charset = "UTF-8" > < title >Document</ title > < link rel = "stylesheet" href = "../css/index.css" > < script src = "https://cdn.bootcss.com/jquery/3.3.1/jquery.js" ></ script > < script src = "../js/javascript.js" ></ script > </ head > < body > < div class = "wrap" id = "wrap" > </ div > </ body > </ html > |
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 | * { padding : 0 ; margin : 0 ; font-family : "微软雅黑" ; font-size : 16px ; border : none ; } body { background : #ddd ; } a { text-decoration : none ; color : #444 ; } a:hover { color : #999 ; } img { border : none ; } .wrap { width : auto ; height : auto ; margin : 0 auto ; position : relative ; } .wrap div { float : left ; box-sizing: border-box; /*还有content-box*/ width : 280px ; height : auto ; padding : 10px ; margin : 10px ; border-radius: 10px ; background : #fff ; /*position: absolute;*/ } .wrap div img { width : 100% ; } .wrap div a { font-size : 18px ; font-weight : bold ; display : block ; /*这里要把它设置为行级元素才能用text-align,而且不能用margin*/ text-align : center ; line-height : 40px ; } |
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 | // 交互设置 var data = [{ "src" : "1.png" , "title" : "第一怪 竹筒当烟袋" }, { "src" : "2.png" , "title" : "第二怪 草帽当锅盖" }, { "src" : "3.png" , "title" : "这边下雨那边晒" }, { "src" : "4.png" , "title" : "第四怪 四季服装同穿戴" }, { "src" : "5.png" , "title" : "第五怪 火车没有汽车快" }, { "src" : "6.png" , "title" : "第六怪 火车不通国内通国外" },{ "src" : "7.png" , "title" : "第七怪 老奶奶爬山比猴快" },{ "src" : "8.png" , "title" : "第八怪 鞋子后面多一块" },{ "src" : "9.png" , "title" : "第九怪 脚趾四季露在外" },{ "src" : "10.png" , "title" : "第十怪 鸡蛋栓着卖" },{ "src" : "11.png" , "title" : "第十一怪 粑粑叫饵块" },{ "src" : "12.png" , "title" : "第十二怪 花生蚕豆数着卖" },{ "src" : "13.png" , "title" : "第十三怪 三个蚊子一盘菜" },{ "src" : "14.png" , "title" : "第十四怪 四个老鼠一麻袋" },{ "src" : "15.png" , "title" : "第十五怪 树上松毛扭着卖" },{ "src" : "16.png" , "title" : "第十六怪 姑娘叫老太" },{ "src" : "17.png" , "title" : "第十七怪 小和尚可以谈恋爱" },{ "src" : "18.png" , "title" : "第十八怪 背着娃娃谈恋爱" }] var addBaseContent = function (wrap) { for ( var i=0; i<data.length; i++) { wrap.innerHTML += '<div><img src="../images/' +data[i].src+ '" alt=""><a href="">' +data[i].title+ '</a></div>' ; }; }; var getMinIndex = function (arr, ht) { for (index in arr) { if (arr[index] == ht) { return index; } /*else { //这里不能加return false会结束循环 return false; }*/ } } var waterfall = function (wrap, boxes) { var boxesWidth = boxes[0].offsetWidth + 20, // windowWidth = window.innerWidth,这个方法也可以获得窗口的宽度; windowWidth = document.documentElement.clientWidth, boxesNum = Math.floor(windowWidth / boxesWidth); wrap.style.width = boxesNum * boxesWidth + 'px' ; var elementArr = new Array(); for ( var i=0; i<boxes.length; i++) { if (i < boxesNum) { elementArr[i] = boxes[i].offsetHeight + 20; } else { var minHeight = Math.min.apply( null , elementArr), minIndex = getMinIndex(elementArr, minHeight), minLeft = boxes[minIndex].offsetLeft - 10; //这里写错了,写成了数组 boxes[i].style.position = "absolute" ; boxes[i].style.left = minLeft + 'px' ; boxes[i].style.top = minHeight + 'px' ; elementArr[minIndex] += boxes[i].offsetHeight + 20; //这个数组本身就是高度的值 } } } window.onload = function () { var wrap = document.getElementById( 'wrap' ); //添加初始元素 addBaseContent(wrap); var boxes = wrap.getElementsByTagName( 'div' ); console.log(boxes[1].offsetHeight) //打印出来的高度只有81 waterfall(wrap, boxes); console.log(boxes[0].offsetHeight) } |
0
收起
正在回答 回答被采纳积分+1
1回答
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧