利用jQuery實現圖片瀑布流分類篩選代碼



18 68 23



特效描述:利用jQuery實現 圖片瀑布流 分類篩選 代碼,利用jQuery實現圖片瀑布流分類篩選代碼

代碼結構

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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滑動星星打分 切換按鈕 表單 表單美化 表單插件 表單美化插件 其他 瀑布流 選項卡自動切換 篩選 篩選器
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 辽宁十一选五平台 山西快乐10分走势图app 福建31选7走势图表 东北牌九玩法 打野怎样可以赚钱 天津快乐十分单式 北京赛車pk10中奖奖金 广东26选5玩法复式26 福建22选5开奖查询 568彩票网址导航 广东好彩1开奖走势图 贵州快三奖金规则 赚钱新途径 dnf2018还能赚钱吗 上海快3预测推荐和值 pk10北京赛车杀码技巧