[JQUERY] masonry + lazy load

대상을 벽돌처럼 뷰잉해 주는 masonry layout은 갤러리 형태의 웹을 보여줄 때 유용하다.

https://masonry.desandro.com/

하지만 이 masonry 기능은 웹페이지에서 이미지를 모두 불러온 후 실행할 수 있는 단점이 있다. 

그래서 이미지가 100개를 한 페이지에서 masonry 기능을 키면 이미지를 모두 로딩해오기 전까지 화면에 이미지가 없는 문제가 있다.

그래서 lazy load plugin도 같이 사용해야 한다.

하지만 lazy load 플러그인하고 연동만하면 이미지가 겹치는 문제가 발생한다.

이렇게..

내가 운영하고 있는 슈퍼컵 사이트의 갤러리 화면도 어제까지 이랬다..

해결책은 아래와 같다. (구글링하다가 일본인이 한 것을 봤다.)

HTML 

1. <div id="works_list">
2. <div class="work_item x2 description">
3. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non alias dolore totam vero blanditiis harum quod. Perferendis, sit, praesentium possimus nostrum quisquam quod nisi fugiat consequuntur. Atque, recusandae reiciendis mollitia!</p>
4. </div><!-- end of .work_item-->
5. <div class="work_item">
6. <img class="lazy" src="images/dummy.gif" data-original="images/works/thumb/001.jpg" alt="">
7. <p>title 1</p>
8. </div><!-- end of .work_item-->
9. <div class="work_item">
10. <img class="lazy" src="images/dummy.gif" data-original="images/works/thumb/002.jpg" alt="">
11. <p>title 2</p>
12. </div><!-- end of .work_item-->
13. ．．．
14. </div><!-- end of #works_list -->

CSS

1. #works_list {
2. margin: 0 auto;
3. }
4.  
5. .work_item {
6. margin: 10px;
7. width: 120px;
8. max-width: 120px;
9. padding: 4px;
10. background-color: #fcfcfc;
11. float: left;
12. }
13.  
14. .work_item.x2 {
15. width: 300px;
16. max-width:300px;
17. }
18.  
19. .work_item img {
20. width: 100%;
21. }
22. .work_item p {
23. text-align: center;
24. margin: 10px auto 0;
25. }
26.  
27. .work_item.description p {
28. text-align: left;
29. padding: 1em;
30. margin: 0 auto;
31. }
32.  
33. @media screen and (min-width : 480px){
34. .work_item {
35. margin: 10px;
36. width: 140px;
37. max-width: 140px;
38. padding: 9px;
39. float: left;
40. }
41.  
42. .work_item.x2 {
43. width: 320px;
44. max-width:320px;
45. }
46. }

jQuery

1. <script>
2. jQuery(function($){
4. $("img.lazy").lazyload({
5. effect: 'fadeIn',
6. effectspeed: 1000,
7. threshold: 200
8. });
10. $('img.lazy').load(function() {
11. masonry_update();
12. });
14. function masonry_update() {
15. ww = $(window).width();
16. var cw = 180;
17. if(ww < 460) { cw = 160; }
18. var $works_list = $('#works_list');
19. $works_list.imagesLoaded(function(){
20. $works_list.masonry({
21. itemSelector: '.work_item',　
22. isFitWidth: true,　
23. columnWidth: cw
24. });
25. });
26. }
28. var timer = false;
29. $(window).resize(function(){
30. ww = $(window).width();
31. if (timer !== false) {
32. clearTimeout(timer);
33. }
34. timer = setTimeout(function() {
35. masonry_update();
36. }, 200);
37. });
38. });
39. </script>

plugin

http://code.jquery.com/jquery-1.10.1.min.js

jquery.lazyload.min.js

imagesloaded.js

masonry.pkgd.min.js

결과 페이지 : 

여자 아이돌 

여자 배우

감사합니다.