플러그인 외

[ 플러그인 ] 04. Masonry, isotope

변쌤(이젠강남) 2023. 11. 2. 09:32
반응형

 

# Masonry

<script src="
https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js
"></script>

 

https://masonry.desandro.com/

 

Masonry

Install Download CDN Link directly to Masonry files on unpkg. Package managers Install with Bower:  bower install masonry --save Install with npm:  npm install masonry-layout Getting started HTML Include the Masonry .js file in your site. Masonry works o

masonry.desandro.com

 

- CDN

 

https://masonry.desandro.com/#cdn

 

Masonry

Install Download CDN Link directly to Masonry files on unpkg. Package managers Install with Bower:  bower install masonry --save Install with npm:  npm install masonry-layout Getting started HTML Include the Masonry .js file in your site. Masonry works o

masonry.desandro.com

 

 

 

샘플

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script>
    <style>
        .container { width: 1400px; margin: auto; }
        .container ul { display: flex; }
        .container ul li { width: 300px; margin-bottom: 20px; border: 1px solid #000; padding: 10px; }
        .container ul li img { width: 100%;  }
    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li>
                <img src="images/big_img1.jpg" alt="">
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident facilis exercitationem ullam asperiores natus, eius, tempore minus unde hic quam et recusandae amet aperiam voluptate sed aut quidem. Molestias, odio.</p>
            </li>
            <li>
                <img src="images/big_img2.jpg" alt="">
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident facilis exercitationem ullam asperiores natus, eius, tempore minus unde hic quam et recusandae amet aperiam voluptate sed aut quidem. Molestias, odio.</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident facilis exercitationem ullam asperiores natus, eius, tempore minus unde hic quam et recusandae amet aperiam voluptate sed aut quidem. Molestias, odio.</p>
            </li>
            <li>
                <img src="images/big_img3.jpg" alt="">
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident facilis exercitationem ullam asperiores natus, eius, tempore minus unde hic quam et recusandae amet aperiam voluptate sed aut quidem. Molestias, odio.</p>
            </li>
            <li>
                <img src="images/big_img4.jpg" alt="">
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident facilis exercitationem ullam asperiores natus, eius, tempore minus unde hic quam et recusandae amet aperiam voluptate sed aut quidem. Molestias, odio.</p>
            </li>
            <li>
                <img src="images/big_img5.jpg" alt="">
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident facilis exercitationem ullam asperiores natus, eius, tempore minus unde hic quam et recusandae amet aperiam voluptate sed aut quidem. Molestias, odio.</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident facilis exercitationem ullam asperiores natus, eius, tempore minus unde hic quam et recusandae amet aperiam voluptate sed aut quidem. Molestias, odio.</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident facilis exercitationem ullam asperiores natus, eius, tempore minus unde hic quam et recusandae amet aperiam voluptate sed aut quidem. Molestias, odio.</p>
            </li>
            <li>
                <img src="images/big_img6.jpg" alt="">
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident facilis exercitationem ullam asperiores natus, eius, tempore minus unde hic quam et recusandae amet aperiam voluptate sed aut quidem. Molestias, odio.</p>
            </li>

            <li>
                <img src="images/big_img7.jpg" alt="">
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident facilis exercitationem ullam asperiores natus, eius, tempore minus unde hic quam et recusandae amet aperiam voluptate sed aut quidem. Molestias, odio.</p>
            </li>

            <li>
                <img src="images/big_img8.jpg" alt="">
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident facilis exercitationem ullam asperiores natus, eius, tempore minus unde hic quam et recusandae amet aperiam voluptate sed aut quidem. Molestias, odio.</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident facilis exercitationem ullam asperiores natus, eius, tempore minus unde hic quam et recusandae amet aperiam voluptate sed aut quidem. Molestias, odio.</p>
            </li>
        
            <li>
                <img src="images/big_img9.jpg" alt="">
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident facilis exercitationem ullam asperiores natus, eius, tempore minus unde hic quam et recusandae amet aperiam voluptate sed aut quidem. Molestias, odio.</p>
            </li>
            <li>
                <img src="images/big_img10.jpg" alt="">
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident facilis exercitationem ullam asperiores natus, eius, tempore minus unde hic quam et recusandae amet aperiam voluptate sed aut quidem. Molestias, odio.</p>
            </li>
        </ul>
    </div>
    <script>          
        let container = document.querySelector('.container');
        let msnry = new Masonry( container, {        
        gutter: 30,
        itemSelector: 'ul li'
        });     
    </script>

     
</body>
</html>

 

 

 

결과

Masonry

 

# isotope

 

https://isotope.metafizzy.co/index.html

 

Isotope · Filter & sort magical layouts

Install Download CDN Link directly to unpkg. Package managers Install with npm: npm install isotope-layout Install with Bower: bower install isotope-layout --save License Commercial license If you want to use Isotope to develop commercial sites, themes, pr

isotope.metafizzy.co

 

 

https://isotope.metafizzy.co/methods#arrange-isotope

 

Isotope · Methods

Methods Methods are actions done by Isotope instances. With jQuery, methods follow the jQuery UI pattern .isotope( 'methodName' ). $grid.isotope() .append( elem ) .isotope( 'appended', elem ) .isotope('layout'); jQuery chaining is broken by methods that re

isotope.metafizzy.co

 

샘플

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
    <style>
        #container { width: 1400px; margin: auto; }
        .nav { display: flex; margin-bottom: 50px; }
        .nav li { padding: 10px 25px; border: 1px solid #000; cursor: pointer;}
        .gallery { display: flex; flex-wrap: wrap; }
        .gallery div { width: 250px; height: 250px; border: 1px solid #000; display: flex; justify-content: center; align-items: center; font-size: 50px; color:#fff }
        .red { background: red;}
        .green { background: green;}
        .pink { background: pink;}
    </style>
</head>
<body>
    <main id="container">
    <ul class="nav">
        <li data-filter=".all">all</li>
        <li data-filter=".red">red</li>
        <li data-filter=".green">green</li>
        <li data-filter=".pink">pink</li>
       </ul>

       <div class="gallery">
        <div class="all red">red</div>
        <div class="all red">red</div>
        <div class="all green">green</div>
        <div class="all red">red</div>
        <div class="all green">green</div>
        <div class="all pink">pink</div>
        <div class="all green">green</div>
        <div class="all pink">pink</div>
        <div class="all red">red</div>
        <div class="all red">red</div>
        <div class="all green">green</div>
        <div class="all red">red</div>
       </div>
    </main>
     <script>
        let elem = document.querySelector('.gallery');
        let items = document.querySelectorAll('.nav li');

        var iso = new Isotope( elem, {
        // options
        itemSelector: 'div',
        layoutMode: 'fitRows'
        });

        items.forEach( item => {
           item.addEventListener( 'click', e=>{
            // let filterValue = e.currentTarget.getAttribute('data-filter');
            let filterValue = e.currentTarget.dataset.filter;
            iso.arrange({ filter: filterValue });
           })
       })
    </script>
  
</body>
</html>

 

 

결과

Isotope

 

red메뉴 클릭시

Isotope

 

반응형

'플러그인 외' 카테고리의 다른 글

[ API ] 카카오 주소 , 카카오 지도  (0) 2024.04.23
[ Markdown ] Markdown 작성법  (0) 2023.12.14
[ 플러그인 ] 03. AOS  (1) 2023.11.02
[ 플러그인 ] 02. swiper, slick, skitter  (0) 2023.11.01
[ 플러그인 ] 01. fancybox  (1) 2023.11.01

'플러그인 외'의 다른글

  • 현재글[ 플러그인 ] 04. Masonry, isotope

관련글

티스토리툴바