[Masonry] Masonry 실행 예제

jQuery/Masonry 2016. 12. 6. 11:02




파일첨부 : masonry.zip





Masonry 실행 예제




Masonry 플러그인 메소드

 -. appended : 기존영역에 블록을 새롭게 추가한다.

 -. destroy : 블록을 완전히 제거한다.

 -. layout : 모든 블록 요소를 배치한다. layout 항목의 크기를 변경하고, 모든 항목을 다시 배치 할 필요가 있을경우 유용하다.

 -. reloadItems : 블록을 재배치 한다.

 -. remove : 블록의 DOM 요소를 제거한다.



01. 아래 masonry_deepen.htmlappendedremove 메소드 효과를 적용한 예제이다.

 masonry_deepen.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Masonry 플러그인</title>
<style>
    * {
        margin : 0px;
        padding : 0px;
    }

    body {
        background-color : #525252;
    }

    .item  {
        width : 150px;
        margin : 10px;  
        background-color : #FFFFFF;
        border-radius : 4px;
        float : left;
        box-shadow : 5px 5px 10px #000000;
    }

    .big { width: 320px; }
    .big > img { width: 320px; }

    .item > .bottom {

        padding-left : 10px;
        padding-right : 10px;
        position : relative;
        bottom : 10px;
    }

    .item > .bottom > img  {

        position : relative;
        left : 21px;
    }
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="masonry.pkgd.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function () {

        // masonry플러그인을 적용합니다.
        jQuery("#masonry_container").masonry({
              itemSelector : ".item"
            , columnWidth : 170
            , isAnimated : true
        });

        // 이벤트를 연결합니다.
        jQuery(".item").on("click", function() {

            // 클릭한 대상을 제거합니다.
            jQuery("#masonry_container").masonry("remove", jQuery(this));
            jQuery("#masonry_container").masonry("reload");
        });

        jQuery("#add_button").click(function() {

            // 2배로 복제합니다.
            var item = jQuery("#masonry_container").children().clone();
            jQuery("#masonry_container").append(item).masonry("appended", item, true);
        });
    });
</script>
</head>
<body>
    <div id = "add_button">
        <img src = "./image/CJ.gif"/>
    </div>
    <div id = "masonry_container">
        <div class = "item">
            <img src = "./image/cj1.jpg"/>
            <div class = "bottom">
                <img src = "./image/top.png"/>
                <p>consectetur adipiscing elit</p>              
            </div>
        </div>
        <div class = "item">
            <img src = "./image/cj2.jpg"/>
            <div class = "bottom">
                <img src = "./image/top.png"/>
                <p>Lorem ipsum dolor sit amet</p>
            </div>
        </div>
        <div class = "item big">
            <img src = "./image/cj3.jpg"/>
            <div class = "bottom">
                <img src = "./image/top.png"/>
                <p>Vivamus tempus molestie sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada</p>
            </div>
        </div>
        <div class = "item">
            <img src = "./image/cj4.jpg"/>
            <div class = "bottom">
                <img src = "./image/top.png"/>
                <p>et mollis diam pretium quis</p>
            </div>
        </div>
        <div class = "item">
            <img src = "./image/cj5.jpg"/>
            <div class = "bottom">
                <img src = "./image/top.png"/>
                <p>Quisque imperdiet, libero vitae</p>
            </div>
        </div>
        <div class = "item">
            <img src = "./image/cj6.jpg"/>
            <div class = "bottom">
                <img src="./image/top.png"/>
                <p>dignissim vestibulum, neque dui pharetra odio</p>
            </div>
        </div>
        <div class = "item big">
            <img src = "./image/cj7.jpg"/>
            <div class = "bottom">
                <img src = "./image/top.png"/>
                <p>dignissim, sem justo dictum mauris, non fringilla urna</p>
            </div>
        </div>
        <div class = "item">
            <img src = "./image/cj8.jpg"/>
            <div class = "bottom">
                <img src = "./image/top.png"/>
                <p>ligula tortor fringilla purus, varius faucibus mauris sem eget diam.</p>
            </div>
        </div>
        <div class = "item">
            <img src = "./image/cj9.jpg"/>
            <div class = "bottom">
                <img src = "./image/top.png"/>
                <p>Lorem ipsum</p>
            </div>
        </div>
        <div class = "item">
            <img src = "./image/cj10.jpg"/>
            <div class = "bottom">
                <img src = "./image/top.png"/>
                <p>vel mauris. Donec vitae ipsum at risus</p>
            </div>
        </div>
        <div class = "item">
            <img src = "./image/cj11.jpg"/>
            <div class = "bottom">
                <img src = "./image/top.png"/>
                <p>Nulla posuere, neque vel bibendum dignissim, sem justo dictum mauris,</p>
            </div>
        </div>
        <div class = "item">
            <img src = "./image/cj12.jpg"/>
            <div class = "bottom">
                <img src = "./image/top.png"/>
                <p>consectetur porta id at diam. Maecenas malesuada, tortor et fringilla consequat,</p>
            </div>
        </div>
        <div class="item">
            <img src="./image/cj13.jpg"/>
            <div class="bottom">
                <img src="./image/top.png"/>
                <p>Praesent nec faucibus dui. Vestibulum ante ipsum primis </p>
            </div>
        </div>
    </div>
</body>
</html>




02. 출력결과는 아래와 같다.







'jQuery > Masonry' 카테고리의 다른 글

[Masonry] Masonry 실행 예제  (0) 2016.12.06
[Masonry] Masonry 플러그인 세팅하기  (1) 2014.05.07

[Masonry] Masonry 플러그인 세팅하기

jQuery/Masonry 2014. 5. 7. 13:33






01. http://masonry.desandro.com/ 으로 접속해서 Masonry 플러그인을 다운받는다.





02. 그럼 http://······/masonry.pkgd.min.js 파일이 열리는데. 해당 코드를 전부 복사한다.






03. 해당 내용을 텍스트 편집기에 복사 붙여넣기 하고, masonry.pkgd.min.js 파일로 저장한다.






04. 위에서 만든 masonry.pkgd.min.js 파일을 작업할 경로에 위치시키고 masonry_test.php 파일을 생성한다.





05. masonry_test.html 코드는 알래와 같다.

 masonry_test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Masonry 플러그인</title>
<style>
    * {
        margin : 0px;
        padding : 0px;
    }

    body {
        background-color : #525252;
    }

    .item {
        margin : 5px;
        width : 100px;
        height : 100px;
        background-color : #FFFFFF;
        border-radius : 10px;
        float : left;
    }

    .big {
        width : 210px;
        height : 430px;
    }
   
    .normal {
        width : 210px;
        height : 210px;
    }
   
    .small {
        width : 100px;
        height : 100px;
    }
</style>

<!-- jQuery의 호출이 masonry.pkgd.min.js보다 반드시 먼저 이루어 져야 한다. -->

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<script type="text/javascript" src="./masonry.pkgd.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#masonry_container").masonry({
              itemSelector : ".item"
            , columnWidth : 110
        });
    });
</script>
</head>
<!-- body 태그 구성 -->
<body>
    <div id="masonry_container">
        <div class = "item small"></div>
        <div class = "item big"></div>
        <div class = "item normal"></div>
        <div class = "item small"></div>
        <div class = "item small"></div>
        <div class = "item small"></div>
        <div class = "item normal"></div>
        <div class = "item normal"></div>
        <div class = "item small"></div>
        <div class = "item small"></div>
        <div class = "item small"></div>
    </div>
</body>
</html>




06. 출력결과는 아래와 같다.








'jQuery > Masonry' 카테고리의 다른 글

[Masonry] Masonry 실행 예제  (0) 2016.12.06
[Masonry] Masonry 플러그인 세팅하기  (1) 2014.05.07
  • 조아하자 2015.04.19 16:12 신고 ADDR 수정/삭제 답글

    필요했는데 덕분에 잘 적용했습니다. 제 블로그는 아니고 다른곳에요...