js给列表设置统一的高度

有些同学可能会有疑问：为啥要js设置高度？css设置不可以吗？
其实我也很无奈，一切都是因客户的需求导致的。废话不多说，分享给大家的是：js给列表设置统一的高度

如上图所示，该列表为响应式因文字长度不一样导致高度不统一，从而引发了浮动元素错位。

瀑布流是可以解决这个问题的，但我们今天只分享js设置高度的方法。

思路：
获取列表中所有li的高度组合成一个数组，然后从数组中寻找出最大值，统一设置左右li的高度。

window.onload = function(){var arr = new Array();$('.Spot ul li').each(function(i){arr[i] = $(this).outerHeight();});if($(window).width() >= 1024){  //只有大于1024px才需要$('.Spot ul li').height(Math.max.apply(null,arr));}
}

如上图所示，这是经过js设置高度之后的效果。

js给列表设置统一的高度相关推荐

html jq固定div高度,js/jQuery获取/设置div的高度，宽度···
js/jQuery获取/设置html标签的高度等css属性· $(".out-div").height($(window).height() - $("#topDiv&q ...
css设置宽度与高度比例，实现高度为宽度的百分之多少
自适应网站,因文章内容上传图片宽高比例不统一,列表页调用图片展示不整齐. css设置宽度与高度比例举例: html <div class="banner"><di ...
按照文字内容动态设置TableViewCell的高度
最近再做个项目需要使用UITableView来显示评论列表,但是有的评论字数特别多,固定的Cell高度显示不完,只能动态地根据字数来设置Cell的高度了只要实现UITableViewDelegate ...
ueditor如何设置上传图片的高度宽度_上百张图片上传并对齐，你加班2小时没搞定，同事简单三步就完成...
Excel除了汇总数据还可以上传保存相片,比如我们在人力信息表中将每个人的相片放到表格里面去,或者我们需要将宠物对应的相片放到表格里面去,这就涉及到图片的批量上传以及对齐的操作. 如图所示,我们需要将 ...
百度ueditor上传图片时如何设置默认宽高度
百度ueditor上传图片时如何设置默认宽高度一.总结一句话总结:直接css或者js里面限制一下就好,可以用html全局限制一下图片的最大高度直接css或者js里面限制一下就好,可以用html全 ...
VSCode 同步设置及扩展插件实现设备上设置统一
VSCode 同步设置及扩展插件实现设备上设置统一准备工作:电脑上需安装VSCode,拥有一个github账户.实现同步的功能主要依赖于VSCode插件 "Settings Sync&q ...
php轮播怎么调整图片大小,微信小程序内轮播图怎样设置成自适应高度
这次给大家带来微信小程序内轮播图怎样设置成自适应高度,微信小程序内轮播图怎设置成自适应高度的注意事项有哪些,下面就是实战案例,一起来看一下. 我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前 ...
JS获取元素的大小（高度和宽度）
JS获取元素的大小(高度和宽度) 在 JavaScript中,使用下面 3 组属性可以获取元素的高度和宽度.如表所示. 元素尺寸属性说明 clientWidth 获取元素可视部分的宽度,即 CSS ...
原生js获取html元素高度,js获取页面及个元素高度、宽度的代码
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...
java 设置宽度和高度,如何通过设置高度和宽度来使宽度和高度反映ScaleTransform以及如何进行ScaleTransform？...
我有一个关于在Silverlight中使用Canvas上的ScaleTransform的问题,Canvas正确缩放,但是Height和Width值始终保持不变 . 例如一个100x100 Canvas ...

js给列表设置统一的高度

js给列表设置统一的高度相关推荐

最新文章

热门文章