jQuery图片瀑布流布局tab分类筛选代码



117 466 156



特效描述:jQuery图片 瀑布流布局 tab分类筛选,jQuery图片瀑布流布局tab分类筛选代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="dist/sortable.min.css">

2. 引入JS

<script type="text/javascript" src="./dist/sortable.min.js"></script>

3. HTML代码

<main class="sortable">
<div class="container">
  <div class="wrapper">
	<ul class="sortable__nav nav">
	  <li>
		<a data-sjslink="all" class="nav__link">
		  所有
		</a>
	  </li>
	  <li>
		<a data-sjslink="flatty" class="nav__link">
		  扁平化
		</a>
	  </li>
	  <li>
		<a data-sjslink="funny" class="nav__link">
		  创意
		</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>
<script type="text/javascript">
document.querySelector('#sortable').sortablejs()
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动星星打分 切换按钮 表单 表单美化 表单插件 表单美化插件 其他 瀑布流 选项卡自动切换 筛选 筛选器

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到