jQuery에 해당되는 글 1건

[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
,
트랙백 0개 , 댓글 1개
  • 조아하자 2015.04.19 16:12 신고 ADDR 수정/삭제 답글

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

1