|
1 | | -/*// 超升级版（列数和每一列的宽度、元素块之间的边距为不定值，兼容IE6~8，实现响应式布局） |
2 | | -var waterfallParent = document.getElementById("waterfall"); |
3 | | -var flowItems = getClassName(waterfallParent, "flow"); |
4 | | -// 声明瀑布流浮动参数 |
5 | | -// parent：瀑布流包裹容器，类型为DOM对象；floowItems：瀑布流布局子元素组，类型为DOM对象数组；pin：列数，类型为int； |
6 | | -// width：每个瀑布流布局元素的宽度，类型为int；horizontalMargin：元素块之间的水平间距，类型为int； |
7 | | -// verticalMargin：元素块之间的垂直间距，类型为int； |
8 | | -var currentFlow = { |
9 | | - parent: waterfallParent, |
10 | | - flowItems: flowItems, |
11 | | - pin: 4, |
12 | | - width: 260, |
13 | | - horizontalMargin: 13, |
14 | | - verticalMargin: 15 |
15 | | -}; |
16 | | -
|
17 | | -// 声明响应式的响应断点 |
18 | | -var deviceWidth = { |
19 | | - D: 1200, |
20 | | - C: 960, |
21 | | - B: 767, |
22 | | - A: 320 |
23 | | -}; |
24 | | -
|
25 | | -// 响应式瀑布流布局绘制 |
26 | | -window.onresize = responseFlow; |
27 | | -window.onload = function () { |
28 | | - // setTimeout(function () { |
29 | | - responseFlow(); |
30 | | - // },2000); |
31 | | -}; |
32 | | -
|
33 | | -function responseFlow() { |
34 | | - var deviceW; |
35 | | - // 判断当前的设备屏幕宽度 |
36 | | - function checkDeviceW() { |
37 | | - var screenW = document.documentElement.offsetWidth || document.body.offsetWidth; |
38 | | - if (screenW >= deviceWidth.A && screenW < deviceWidth.B) { |
39 | | - deviceW = "A"; |
40 | | - } else if (screenW >= deviceWidth.B && screenW < deviceWidth.C) { |
41 | | - deviceW = "B"; |
42 | | - } else if (screenW >= deviceWidth.C && screenW < deviceWidth.D) { |
43 | | - deviceW = "C"; |
44 | | - } else if (screenW >= deviceWidth.D) { |
45 | | - deviceW = "D"; |
46 | | - } |
47 | | - } |
48 | | - checkDeviceW(); |
49 | | -
|
50 | | - // 修改不同响应下瀑布流布局的列数 |
51 | | - switch (deviceW) { |
52 | | - case "A": |
53 | | - currentFlow.pin = 1; |
54 | | - break; |
55 | | - case "B": |
56 | | - currentFlow.pin = 2; |
57 | | - break; |
58 | | - case "C": |
59 | | - currentFlow.pin = 3; |
60 | | - break; |
61 | | - case "D": |
62 | | - currentFlow.pin = Math.floor(currentFlow.parent.offsetWidth / currentFlow.width); |
63 | | - break; |
64 | | - } |
65 | | - // 瀑布流重绘 |
66 | | - waterfall(currentFlow); |
67 | | -} |
68 | | -
|
69 | | -// 其中flow是一个对象，分别包含如下键值： |
70 | | -// pin：列数，类型为int； |
71 | | -function waterfall(flow) { |
72 | | - // 声明瀑布流中每一列高度的数组pin[] |
73 | | - var pin = new Array(flow.pin); |
74 | | - //最大列高度 |
75 | | - var maxH = 0; |
76 | | - // 瀑布流框块数组 |
77 | | - var flowItems = flow.flowItems; |
78 | | - // 声明每一列高度的初始值 |
79 | | - for (var j = 0, pinLen = pin.length; j < pinLen; j++) { |
80 | | - pin[j] = flowItems[j].offsetTop + flowItems[j].offsetHeight; |
81 | | - } |
82 | | - // 循环瀑布流元素的高度 |
83 | | - for (var i = 0, len = flowItems.length; i < len; i++) { |
84 | | - if (flow.width) { |
85 | | - flowItems[i].style.width = flow.width + "px"; |
86 | | - } |
87 | | -
|
88 | | - if (i >= flow.pin) { |
89 | | - // 获取pin数组中的最小值 |
90 | | - var minH = Math.min.apply(null, pin); |
91 | | - var tempH = Math.max.apply(null, pin); |
92 | | - if (tempH > maxH) { |
93 | | - maxH = tempH; |
| 1 | +//先等图片都加载完成 |
| 2 | +//再执行布局函数 |
| 3 | +// |
| 4 | +(function() { |
| 5 | + var imgs = document.querySelectorAll('.grid img'); |
| 6 | + var totalImgs = imgs.length; |
| 7 | + var count = 0; |
| 8 | + //console.log(imgs); |
| 9 | + for (var i = 0; i < totalImgs; i++) { |
| 10 | + if (imgs[i].complete) { |
| 11 | + //console.log('complete'); |
| 12 | + count++; |
| 13 | + } else { |
| 14 | + imgs[i].onload = function() { |
| 15 | + // alert('onload'); |
| 16 | + count++; |
| 17 | + //console.log('onload' + count); |
| 18 | + if (count == totalImgs) { |
| 19 | + //console.log('onload---bbbbbbbb'); |
| 20 | + initGrid() |
| 21 | + } |
94 | 22 | } |
95 | | - // 获取高度数组中最小高度的索引 |
96 | | - var minHItem = pin.indexOf(minH); |
97 | | - // 把当前元素在视觉上置于最小高度的一列 |
98 | | - flowItems[i].style.left = minHItem * (flow.width + flow.horizontalMargin) + "px"; |
99 | | - flowItems[i].style.top = minH + flow.verticalMargin + "px"; |
100 | | - // 重置列的高度 |
101 | | - pin[minHItem] += flowItems[i].offsetHeight + flow.verticalMargin; |
102 | | - } else if (i < flow.pin) { |
103 | | - flowItems[i].style.top = 0; |
104 | | - flowItems[i].style.left = (i % flow.pin) * (flow.width + flow.horizontalMargin) + "px"; |
105 | 23 | } |
106 | 24 | } |
107 | | - // 计算瀑布流容器的宽度 |
108 | | - flow.parent.style.width = flow.pin * flow.width + (flow.pin - 1) * flow.horizontalMargin + "px"; |
109 | | -
|
110 | | - var lastItem = flowItems[flowItems.length - 1]; |
111 | | - var lastH = lastItem.offsetHeight + lastItem.offsetTop; |
112 | | - maxH = maxH > lastH ? maxH : lastH; |
113 | | - flow.parent.style.height = maxH + 'px'; |
114 | | -} |
115 | | -
|
116 | | -// 获取className的元素集合 |
117 | | -// 参数：obj指父元素；oClassName为元素的class属性值 |
118 | | -function getClassName(obj, oClassName) { |
119 | | - // IE9+及标准浏览器可以直接使用getElementsByClassName()获取className元素集合 |
120 | | - if (document.getElementsByClassName) { |
121 | | - return obj.getElementsByClassName(oClassName); |
122 | | - } else { |
123 | | - // classNameArr用来装载class属性值为oClassName的元素； |
124 | | - var classNameArr = []; |
125 | | - // 获取obj的直接子元素 |
126 | | - var objChild = obj.children || obj.childNodes; |
127 | | - // 遍历obj元素，获取class属性值为oClassName的元素列表 |
128 | | - for (var i = 0; i < objChild.length; i++) { |
129 | | - // 判断obj子元素的class属性值中是否含有oClassName |
130 | | - if (hasClassName(objChild[i], oClassName)) { |
131 | | - classNameArr.push(objChild[i]); |
132 | | - } |
133 | | - } |
134 | | - return classNameArr; |
| 25 | + if (count == totalImgs) { |
| 26 | + //console.log('---bbbbbbbb'); |
| 27 | + initGrid() |
135 | 28 | } |
136 | | -} |
137 | 29 |
|
138 | | -// Array.indexOf()函数的兼容性重写 |
139 | | -if (!Array.prototype.indexOf) { |
140 | | - Array.prototype.indexOf = function(ele) { |
141 | | - // 获取数组长度 |
142 | | - var len = this.length; |
143 | | - // 检查值为数字的第二个参数是否存在，默认值为0 |
144 | | - var fromIndex = Number(arguments[1]) || 0; |
145 | | - // 当第二个参数小于0时，为倒序查找，相当于查找索引值为该索引加上数组长度后的值 |
146 | | - if (fromIndex < 0) { |
147 | | - fromIndex += len; |
148 | | - } |
149 | | - // 从fromIndex起循环数组 |
150 | | - while (fromIndex < len) { |
151 | | - // 检查fromIndex是否存在且对应的数组元素是否等于ele |
152 | | - if (fromIndex in this && this[fromIndex] === ele) { |
153 | | - return fromIndex; |
154 | | - } |
155 | | - fromIndex++; |
156 | | - } |
157 | | - // 当数组长度为0时返回不存在的信号：-1 |
158 | | - if (len === 0) { |
159 | | - return -1; |
160 | | - } |
161 | | - } |
| 30 | +}()); |
| 31 | + |
| 32 | +function initGrid() { |
| 33 | + var msnry = new Masonry('.grid', { |
| 34 | + // options |
| 35 | + itemSelector: '.grid-item', |
| 36 | + columnWidth: 250, |
| 37 | + isFitWidth: true, |
| 38 | + gutter: 20, |
| 39 | + }); |
162 | 40 | } |
163 | | -*/ |
0 commit comments