欢迎订阅我的博客JS实现多列等高
很多同学一定在为多列等高的问题头痛吧！今天提供一个很方便的控制多列等高的JS，可以控制多个标签，并循环遍历任意多个标签。不需要添加ID或class。很不错的！
先看html代码:
- <ul id="news">
- <li>
- <h3><a href="#">news title 1</a></h3>
- <p>Descirption 1 阿斯<br>asas</p>
- <p class="more"><a href="#">more 1</a></p>
- </li>
- <li>
- <h3><a href="#">news title 2</a></h3>
- <p>Descirption 1</p>
- <p class="more"><a href="#">more 1</a></p>
- </li>
- <li>
- <h3><a href="#">news title 3</a></h3>
- <p>Descirption 1</p>
- <p class="more"><a href="#">more 1</a></p>
- </li>
- <li>
- <h3><a href="#">news title 4</a></h3>
- <p>Descirption 1</p>
- <p class="more"><a href="#">more 1</a></p>
- </li>
- </ul>
这里是JS代码（有用到一个JS库，DOMHelp）:
- fixcolumns={
- highest:0,
- moreClass:'more',
- init:function(){
- if(!document.getElementById || !document.createTextNode){return;}
- fixcolumns.n=document.getElementById('news');
- if(!fixcolumns.n){return;}
- fixcolumns.fix('h3');
- fixcolumns.fix('p');
- fixcolumns.fix('li');
- },
- fix:function(elm){
- fixcolumns.getHighest(elm);
- fixcolumns.fixElements(elm);
- },
- getHighest:function(elm){
- fixcolumns.highest=0;
- var temp=fixcolumns.n.getElementsByTagName(elm);
- for(var i=0;i<temp.length;i++){
- if(!temp[i].offsetHeight){continue;}
- if(temp[i].offsetHeight>fixcolumns.highest){
- fixcolumns.highest=temp[i].offsetHeight;
- }
- }
- },
- fixElements:function(elm){
- var temp=fixcolumns.n.getElementsByTagName(elm);
- for(var i=0;i<temp.length;i++){
- if(!DOMhelp.cssjs('check',temp[i],fixcolumns.moreClass)){
- temp[i].style.height=parseInt(fixcolumns.highest)+'px';
- }
- }
- }
- }
- DOMhelp.addEvent(window,'load',fixcolumns.init,false);
自己复制另存代码，测试一下，应该会与用到的时候。注意该处用到的DOMHelp库，是一个操作文档节点很方便且符合标准并兼容各浏览器的JS库。
标签：
