38 lines
		
	
	
		
			1.2 KiB
		
	
	
	
		
			HTML
		
	
	
	
			
		
		
	
	
			38 lines
		
	
	
		
			1.2 KiB
		
	
	
	
		
			HTML
		
	
	
	
| <script>
 | |
|   window.onload = function () {
 | |
|     // ========================= masonry =========================
 | |
|     var grid = document.querySelector('.pgrid');
 | |
|     var msnry = new Masonry(grid, {
 | |
|       itemSelector: '.pgrid-item',
 | |
|       columnWidth: '.pgrid-sizer',
 | |
|       percentPosition: true,
 | |
|     });
 | |
|     imagesLoaded(grid).on('progress', function () {
 | |
|       msnry.layout();
 | |
|     });
 | |
|     
 | |
|     enquire.register("screen and (max-width:769px)", {
 | |
|       match: function () {
 | |
|         document.querySelectorAll('.pgrid-item').forEach(function (elem) {
 | |
|           elem.classList.add('full');
 | |
|           elem.classList.remove('half');
 | |
|         });
 | |
|         document.querySelectorAll('.pgrid-sizer').forEach(function (elem) {
 | |
|           elem.classList.add('full');
 | |
|           elem.classList.remove('half');
 | |
|         });
 | |
|       },
 | |
|       unmatch: function () {
 | |
|         document.querySelectorAll('.pgrid-item').forEach(function (elem) {
 | |
|           elem.classList.add('half');
 | |
|           elem.classList.remove('full');
 | |
|         });
 | |
|         document.querySelectorAll('.pgrid-sizer').forEach(function (elem) {
 | |
|           elem.classList.add('half');
 | |
|           elem.classList.remove('full');
 | |
|         });
 | |
|       },
 | |
|     });
 | |
|     // ===========================================================
 | |
|   }
 | |
| </script> |