OLD | NEW |
(Empty) | |
| 1 <script src='masonry.js'></script> |
| 2 <style> |
| 3 body { |
| 4 display: none; |
| 5 margin: 0; |
| 6 } |
| 7 .item { |
| 8 max-width: 200px; |
| 9 border: 2px solid red; |
| 10 margin: 1px; |
| 11 } |
| 12 </style> |
| 13 <div id=container> |
| 14 <div class=item>Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo e
iusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim adminim venia
m, quis nostrud exercitation ullamco laboris nisi ut aliquip exea commodo conseq
uat. Duis aute irure dolor in reprehenderit in voluptatevelit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecatcupidatat non proident, sunt i
n culpa qui officia deserunt mollit anim id estlaborum.</div> |
| 15 </div> |
| 16 <script> |
| 17 var container = document.querySelector('#container'); |
| 18 var item = container.children[0]; |
| 19 for (var i = 0; i < 100; ++i) { |
| 20 container.appendChild(item.cloneNode(true)); |
| 21 } |
| 22 document.body.style.display = 'block'; |
| 23 window.done = false; |
| 24 window.brick = function() { |
| 25 var mason = new Masonry(container, { |
| 26 itemSelector: '.item', |
| 27 }); |
| 28 requestAnimationFrame(function() { |
| 29 mason.element.style.maxWidth = '950px'; |
| 30 mason.layout(); |
| 31 requestAnimationFrame(function() { |
| 32 window.done = true; |
| 33 }); |
| 34 }); |
| 35 }; |
| 36 </script> |
OLD | NEW |