div分组排列，并让高度一致 

 1 //新增模板显示按高度排版
 2     var allW = $(window).width();
 3     if(allW > 992 && allW < 1220){//中屏一行显示三个模板信息
 4         //获取div的高度,3个一组存入allDivHeight
 5         var allDivHeight = []; 
 6         for(k=0;k<Math.ceil($("#template").children("div").length/3);k++){
 7             $("#template").children("div").each(function(index,element){
 8                 if(k*3 <= index && index <= 3*(k+1)){
 9                     allDivHeight.push($(this).children(".Template_box").height());   
10                 };
11             });
12         }
13         for (var j = 0 ; j<Math.ceil(allDivHeight.length/3); j++){
14             var group = allDivHeight.slice(j*3,3*(j+1)); //每3个为一组
15             var maxGroupHeight = Math.max.apply(null,group); //该组中最大的
16             //设置该组中所有div的高度为最大高度
17             $("#template").children("div").each(function(index,element){
18                 if(j*3<= index && index <= 3*(j+1)){
19                     $(this).children("div").height(maxGroupHeight);
20                 }
21             });
22         }
23     }
24     else if(allW > 1220){//大屏 一行显示四个模板信息
25         //获取div的高度,3个一组存入allDivHeight
26         var allDivHeight = []; 
27         for(k=0;k<Math.ceil($("#template").children("div").length/4);k++){
28             $("#template").children("div").each(function(index,element){
29                 if(k*4 <= index && index <= 4*(k+1)){
30                     allDivHeight.push($(this).children(".Template_box").height());   
31                 };
32             });
33         }
34         for (var j = 0 ; j<Math.ceil(allDivHeight.length/4); j++){
35             var group = allDivHeight.slice(j*4,4*(j+1)); //每3个为一组
36             var maxGroupHeight = Math.max.apply(null,group); //该组中最大的
37             //设置该组中所有div的高度为最大高度
38             $("#template").children("div").each(function(index,element){
39                 if(j*4<= index && index <= 4*(j+1)){
40                     $(this).children("div").height(maxGroupHeight);
41                 }
42             });
43         }
44     }

 

posted @ 2018-12-12 09:06  微光半夏星  阅读(309)  评论(0)    收藏  举报