jQuery插件
1、瀑布流插件的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><!--页面背景色,演示页面的样式,使用时可以不引用-->
<link rel="stylesheet" href="./css/main.css">
<!-- <link href="https://fonts.googleapis.com/css?family=Hind:400,600|Open+Sans:300,600" rel="stylesheet"> -->
<link rel="stylesheet" href="./dist/sortable.min.css">
<script type="text/javascript" src="./dist/sortable.min.js"></script>
</head>
<body>
<div class="htmleaf-container">
<main class="sortable">
<div class="container">
<div class="wrapper">
<ul class="sortable__nav nav">
<li>
<a data-sjslink="all" class="nav__link">
All
</a>
</li>
<li>
<a data-sjslink="flatty" class="nav__link">
Flatty
</a>
</li>
<li>
<a data-sjslink="funny" class="nav__link">
Funny
</a>
</li>
</ul>
<div id="sortable" class="sjs-default">
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-1.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">Example 1</h2>
<p class="card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, eius, asperiores. Incidunt sapiente est quae iure...
</p>
</div>
</div>
</div>
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-2.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">Example 2</h2>
<p class="card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum vitae necessitatibus, dolorem similique vero explicabo...
</p>
</div>
</div>
</div>
<div data-sjsel="funny">
<div class="card">
<img class="card__picture" src="./images/item-3.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">Example 3</h2>
<p class="card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, placeat voluptate, fuga tenetur eos ducimus animi porro...
</p>
</div>
</div>
</div>
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-4.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">Example 4</h2>
<p class="card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit doloremque quisquam, obcaecati unde nam est quos...
</p>
</div>
</div>
</div>
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-5.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">Example 5</h2>
<p class="card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse corporis hic minima nisi reprehenderit...
</p>
</div>
</div>
</div>
<div data-sjsel="funny">
<div class="card">
<img class="card__picture" src="./images/item-6.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">Example 6</h2>
<p class="card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel voluptatibus, id, deserunt inventore...
</p>
</div>
</div>
</div>
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-7.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">Example 7</h2>
<p class="card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum enim beatae vero culpa, fuga, magni sunt dolores nam...
</p>
</div>
</div>
</div>
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-8.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">Example 8</h2>
<p class="card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae numquam, blanditiis necessitatibus...
</p>
</div>
</div>
</div>
<div data-sjsel="funny">
<div class="card">
<img class="card__picture" src="./images/item-9.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">Example 9</h2>
<p class="card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur adipisci voluptatum laborum officiis...
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<script type="text/javascript">
document.querySelector('#sortable').sortablejs()
</script>
</body>
</html>