|
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery图片筛选过滤器插件</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/demo.css"> <link rel="stylesheet" href="css/index.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://www./libs/html5shiv/3.7.2/html5shiv.js"></script> <script src="https://www./libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container" style="background: #fff;padding: 2em;"> <!-- Filter Controls - Simple Mode --> <div class="row"> <!-- A basic setup of simple mode filter controls, all you have to do is use data-filter="all" for an unfiltered gallery and then the values of your categories to filter between them --> <ul class="simplefilter"> 简单过滤器控件： <li class="active" data-filter="all">全部</li> <li data-filter="1">城市</li> <li data-filter="2">乡村</li> <li data-filter="3">工业</li> <li data-filter="4">日光</li> <li data-filter="5">夜景</li> </ul> </div> <!-- Filter Controls - Multifilter Mode --> <div class="row"> <!-- A basic setup of multifilter controls, when the user toggles a category the corresponding items are rendered or hidden --> <ul class="multifilter"> 滤波器控制： <li data-multifilter="1">城市</li> <li data-multifilter="2">乡村</li> <li data-multifilter="3">工业</li> </ul> </div> <!-- Shuffle & Sort Controls --> <div class="row"> <ul class="sortandshuffle"> 排序 & 移动 控制: <!-- Basic shuffle control --> <li class="shuffle-btn" data-shuffle>Shuffle</li> <!-- Basic sort controls consisting of asc/desc button and a select --> <li class="sort-btn active" data-sortAsc>Asc</li> <li class="sort-btn" data-sortDesc>Desc</li> <select data-sortOrder> <option value="domIndex"> Position </option> <option value="sortData"> Description </option> </select> </ul> </div> <!-- Search control --> <div class="row search-row"> 关键字搜索： <input type="text" class="filtr-search" name="filtr-search" data-search> </div> <div class="row"> <!-- This is the set up of a basic gallery, your items must have the categories they belong to in a data-category attribute, which starts from the value 1 and goes up from there --> <div class="filtr-container"> <div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1, 5" data-sort="Busy streets"> <img class="img-responsive" src="img/city_1.jpg" alt="sample image"> <span class="item-desc">Busy Streets</span> </div> <div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="2, 5" data-sort="Luminous night"> <img class="img-responsive" src="img/nature_2.jpg" alt="sample image"> <span class="item-desc">Luminous night</span> </div> <div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1, 4" data-sort="City wonders"> <img class="img-responsive" src="img/city_3.jpg" alt="sample image"> <span class="item-desc">city wonders</span> </div> <div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="3" data-sort="In production"> <img class="img-responsive" src="img/industrial_1.jpg" alt="sample image"> <span class="item-desc">in production</span> </div> <div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="3, 4" data-sort="Industrial site"> <img class="img-responsive" src="img/industrial_2.jpg" alt="sample image"> <span class="item-desc">industrial site</span> </div> <div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="2, 4" data-sort="Peaceful lake"> <img class="img-responsive" src="img/nature_1.jpg" alt="sample image"> <span class="item-desc">peaceful lake</span> </div> <div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1, 5" data-sort="City lights"> <img class="img-responsive" src="img/city_2.jpg" alt="sample image"> <span class="item-desc">city lights</span> </div> <div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="2, 4" data-sort="Dreamhouse"> <img class="img-responsive" src="img/nature_3.jpg" alt="sample image"> <span class="item-desc">dreamhouse</span> </div> <div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="3" data-sort="Restless machines"> <img class="img-responsive" src="img/industrial_3.jpg" alt="sample image"> <span class="item-desc">restless machines</span> </div> </div> </div> </div> <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script> <script src="js/jquery.filterizr.min.js"></script> <script src="js/controls.js"></script> <script type="text/javascript"> $(function() { $('.filtr-container').filterizr(); }); </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>来源：<a href="http://down./" target="_blank"> </a></p> </div> </body> </html> |
|
|
来自： 昵称48806104 > 《文件夹1》
