<div class="wrapper">

         <div class="sWrapper">

             <input type="text" class="sText">

             <span class="btn" sex="m">Male</span>

             <span class="btn" sex="f">Female</span>

             <span class="btn active" sex="a">All</span>

         </div>

         <div class="flWrapper">

             <ul>

             </ul>

         </div>

     </div>

 *{

             margin:0px;

             padding: 0px;

             list-style: none;

         }

         .wrapper{

             width:400px;

             padding:10px 15px;

             border: 1px solid #ccc;

             margin:100px auto 0px;

             border-radius: 6px;

         }

         img{

             width: 50px;

             height: 50px;

         }

         .wrapper .sWrapper{

             margin-bottom: 20px;

         }

         .wrapper .sWrapper input{

             width: 220px;

             height: 25px;

             padding-left:10px;

             outline: none;

             border-radius:4px;

             border:1px solid #777;

         }

         .wrapper .sWrapper .btn{

             cursor: pointer;

             color: #3c8dff;

             padding: 0px 5px;

             border-radius: 4px;

         }

         .wrapper .sWrapper .btn.active{

             color:#fff;

             background: #3c8dff;

         }

         .wrapper .flWrapper ul li {

             position: relative;

             padding-left: 60px;

             padding-top: 10px;

             padding-bottom: 10px;

             border-bottom:1px solid #999;

         }

         .wrapper .flWrapper ul li img {

             position: absolute;

             left: 0px;

             top:10px;

         }

         .wrapper .flWrapper ul li .name {

             margin-bottom: 10px;

         }

         .wrapper .flWrapper ul .li .des {

             font-size: 12px;

             color:#666;

         }

 //模拟后端传过来的数据表单

 var personArr = [

     { name: '大钢铁', src: '../ing/gnag.PNG', des: 'I am gang', sex: 'm', age: 18 },

     { name: '小女巫', src: '../ing/fei.PNG', des: 'I am fei', sex: 'f', age: 19 },

     { name: '大绿巨', src: '../ing/lv.PNG', des: 'I am lv', sex: 'm', age: 20 },

     { name: '大寡妇', src: '../ing/hei.PNG', des: 'I am black wife', sex: 'f', age: 23 },

     { name: '小队长', src: '../ing/mei.PNG', des: 'I am USA', sex: 'm', age: 24 },

 ];

 // 初始变量

 var oUl = document.getElementsByTagName('ul')[0];

 var oInput = document.getElementsByTagName('input')[0];

 store.subscribe(function () {

     RenderPage(lastFilterArr(personArr));

 });

 // 数据渲染页面

 function RenderPage(data) {

     //遍历数组长度添加

     var htmlStr = ''; //设定一个空字符串接收数据

     oUl.innerHTML = ''; //

     data.forEach(function (ele, index, self) {

         htmlStr = htmlStr + '<li><img src="' + ele.src + '"><img/><p class="name">' + ele.name + '</p><p class="dse">' + ele.des + '</p></li>';

         //遍历出后端里面的数据

     });

     oUl.innerHTML = htmlStr; //把数据以HTML形式付给页面

 }

 RenderPage(personArr);// 执行渲染函数

 //添加行为

 oInput.oninput = debounce(function () { //输入触发过滤

     store.dispatch({ type: 'text', value: this.value });

     //传到渲染页面的函数中，重新绘制页面

 }, 1000);//最后再加上防抖功能，也就是相当于套上一个定时器，输入文本1秒后再执行搜索

 //btn style

 var oBtnArr = [].slice.call(document.getElementsByClassName('btn'), 0);

 //把btn类数组转为数组

 var lastActiveBtn = oBtnArr[2];

 oBtnArr.forEach(function (ele, index, self) {

     ele.onclick = function () {

         changeActive(this);

         RenderPage(filterArrBySex(personArr, this.getAttribute('sex')));

         store.dispatch({ type: 'sex', value: this.getAttribute('sex') });

         //渲染过滤后的性别

     }

 });

 //点击按钮切换样式

 function changeActive(curActiveBtn) {

     curActiveBtn.className = 'btn active';

     lastActiveBtn.className = 'btn';

     lastActiveBtn = curActiveBtn;

 }

 // text -- 根据文本来过滤

 function filterArrByText(data, text){

     if(!text){ //非文本则返回数据表单

         return data;

     }else{  //否则进入一下进行过滤

         return data.filter(function(ele, index){

             return ele.name.indexOf(text) != -1;

             //返回indexOf文本不等于-1的文本

             //如果输入的文本不在数据表单名字里面indexOf则会返回-1

         });

     }

 }

  // sex -- 根据性别过滤

  function filterArrBySex (data, sex){

     if(sex == 'a'){

         return data;

         //如果传入的是a，就返回a

     }else{

         return data.filter(function (ele, index, self){

             return ele.sex == sex;

             //如果sex等于传入的sex，就返回相应的sex

         })

     }

 }

 function combineFilter (config){

     return function (data){

         for(var prop in config){ //循环过滤这两个函数

             //依次过滤这两个函数，先过滤文本数据后返回给data

             //data拿到的过滤一次后的数据再次过滤一次把性别再过滤一次

             data = config[prop](data, store.getState(prop));

         }

         return data; //最后过滤完返回出来

     }

 }

 //接收过滤函数传到combineFilter这个文件，接着合并等于lastFilterArr

 var lastFilterArr = combineFilter({

     text: filterArrByText,

     sex: filterArrBySex

 })

 function createStore (initialState) {

     var stata = initialState || {};

     var list = [];

     //获取

     function getState (type) {

         return stata[type];

     }

     //处理

     function dispatch (action) {

         stata[action.type] = action.value;

         //调用之前订阅过的函数

         list.forEach(function(ele){

             ele();

         })

     }

     //订阅

     function subscribe (func) {

         list.push(func);

     }

     return {

         getState:getState,

         dispatch:dispatch,

         subscribe:subscribe

     }

 }

 var store = createStore({text: '', sex: 'a'});

 //防抖功能，就是搜索框输入文字1秒后再进行搜索

 function debounce (handler, delay){

     var timer = null;

     return function (e) {

         var _self = this, _arg = arguments;

         clearTimeout(timer);

         timer = setTimeout(function () {

             handler.apply(_self, _arg);

         },delay);

     }

 }

谢谢观看，有大佬经过请指出意见