OLD | NEW |
1 <style> | 1 <style> |
2 body { | 2 body { |
3 display: none; | 3 display: none; |
4 margin: 0; | 4 margin: 0; |
5 } | 5 } |
6 .item { | 6 .item { |
7 max-width: 200px; | 7 max-width: 200px; |
8 border: 2px solid red; | 8 border: 2px solid red; |
9 margin: 1px; | 9 margin: 1px; |
10 } | 10 } |
(...skipping 1098 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1109 } | 1109 } |
1110 return -1 | 1110 return -1 |
1111 }; | 1111 }; |
1112 "function" == typeof define && define.amd ? define(["outlayer/outlayer", | 1112 "function" == typeof define && define.amd ? define(["outlayer/outlayer", |
1113 "get-size/get-size"], b) : "object" == typeof exports ? | 1113 "get-size/get-size"], b) : "object" == typeof exports ? |
1114 module.exports = b(require("outlayer"), require("get-size")) : | 1114 module.exports = b(require("outlayer"), require("get-size")) : |
1115 a.Masonry = b(a.Outlayer, a.getSize) | 1115 a.Masonry = b(a.Outlayer, a.getSize) |
1116 }(window); | 1116 }(window); |
1117 var container = document.querySelector('#container'); | 1117 var container = document.querySelector('#container'); |
1118 var item = container.children[0]; | 1118 var item = container.children[0]; |
1119 for (var i = 0; i < 100; ++i) { | 1119 for (var i = 0; i < 20; ++i) { |
1120 container.appendChild(item.cloneNode(true)); | 1120 container.appendChild(item.cloneNode(true)); |
1121 } | 1121 } |
1122 document.body.style.display = 'block'; | 1122 document.body.style.display = 'block'; |
1123 window.done = false; | 1123 window.done = false; |
1124 window.brick = function() { | 1124 window.brick = function() { |
1125 var mason = new Masonry(container, { | 1125 var mason = new Masonry(container, { |
1126 itemSelector: '.item', | 1126 itemSelector: '.item', |
1127 }); | 1127 }); |
1128 requestAnimationFrame(function() { | 1128 function relayout(i) { |
1129 mason.element.style.maxWidth = '950px'; | 1129 if (i === 10) { |
1130 mason.layout(); | 1130 window.done = true; |
| 1131 return; |
| 1132 } |
1131 requestAnimationFrame(function() { | 1133 requestAnimationFrame(function() { |
1132 window.done = true; | 1134 mason.element.style.maxWidth = '950px'; |
| 1135 mason.layout(); |
| 1136 requestAnimationFrame(function() { |
| 1137 mason.element.style.maxWidth = '200px'; |
| 1138 mason.layout(); |
| 1139 requestAnimationFrame(function() { |
| 1140 relayout(i + 1); |
| 1141 }); |
| 1142 }); |
1133 }); | 1143 }); |
1134 }); | 1144 } |
| 1145 relayout(0); |
1135 }; | 1146 }; |
1136 </script> | 1147 </script> |
OLD | NEW |