有这样一个需求：
在ul>li的列表中，先传入三张图片，然后根据图片的大小，判断是竖图显示，还是横图显示。
刚开始的思路是这样的：先获取到每个li，然后获取li中的imgBox，最后获取到imgBox内的img的宽高，通过对比宽高来进行判断。
代码如下：
$(window).ready(function () { var lis = $('.rank_left ul li'); var imgObj = new Image(); var url = lis.find('img').attr('src'); imgObj.src = url; imgObj.onload = function(){ for( let i = 0; i < lis.length; i++){ var imgWidth = lis.eq(i).children(".imgBox").find('img').width(), imgHeight = lis.eq(i).children(".imgBox").find('img').height(); if(imgWidth < imgHeight){ lis.eq(i).children(".imgBox").addClass('multi') }else{ lis.eq(i).children(".imgBox").addClass('screen') } } }});不出所料，最后并没有出现效果。检查了好几遍没有发现错误，无奈之下，只能求助于我们主管，然后主管来到我这里看了两眼，说到：‘你这样写是错误滴’，然后就扒拉扒拉的在我之前的代码上改了起来，改完之后，我看了一下，才发现我的错误在哪里。
1、jquery对象和DOM对象的基本知识，没有掌握牢固：
使用$(""rank_left ul li)获取的是jquery的对象，它是javaScript的一个数组，并不是Dom对象。jquery对象是通过jquery包装后产生的Dom对象，是jquery独有的，可以使用jquery的方法，不能使用Dom的方法。
所以在刚开始获取对象的时候，我就获取错误。
2、思路没有整理清楚，之前的思路想的太过于复杂，没有想到关键处。
主管在修改我代码的时候，顺便说了一下思路：1、要遍历每个li。 2、获取到li内部的imgBox。3、在获取imgBox内的第一个img的宽高，最后对比宽高。
这么一波说下来，我都觉得这个思路真tn的清晰，一步一步要干嘛，分析的简直了，反观我之前的思路，只是知道要去比较图片的宽高，但是具体的操作并不是特别的清晰。
最后就放一下正确的代码：
function getimgWh (){ //获取到每个li里imgBox内的第一张图片，然后new出图片对象，在进行图片的宽高对比 $('.rank_left ul li').each(function(){ var box = $(this).find('.imgBox') //获取到imgBox var img =$(this).find('.imgBox').find('img').eq(0) //获取到每组图片的第一个图片 var imgObj = new Image(); var url = img.attr('src'); imgObj.src = url; imgObj.onload = function(){ var imgHeight = img.height(), imgWidth = img.width() if(imgWidth < imgHeight){ box.addClass('multi'); }else{ box.addClass('screen'); } } })}结构：
<li><i class="icon icon2">2</i>
<div class="gameContent">
<div class="l">
<a href="###" class="game_img">
<img src="./pic/pic_11.jpg" alt="">
</a>
<a href="###" class="details">详情</a>
</div>
<div class="r">
<div class="r_name">
<a href="###" class="r_na">奇幻世界英雄</a>
<a href="###" class="r_type">角色</a>
</div>
<a href="###" class="company">成都悦游无限科技有限公司</a>
<div class="score">
<span class="stars"><i></i></span>
<span class="score_text">8.0</span>
</div>
<div class="type">
<span>大小：1952.3M</span>
<span>版本：1.0.426808</span>
</div>
<div class="tags">
标签：
<a href="###">PVP,回忆,高画质,打击感,ARPG,怀旧,多人,RPG,手柄,武侠</a>
</div>
<span class="editor">编辑推荐：国产硬核动作武侠大作！</span>
</div>
</div>
<div class="imgBox fr">
<a href="###" class="rank_img">
<img src="./pic/pic_02.jpg" alt="">
</a>
<a href="###" class="rank_img">
<img src="./pic/pic_02.jpg" alt="">
</a>
<a href="###" class="rank_img">
<img src="./pic/pic_02.jpg" alt="">
</a>
</div>
</li>样式：
.rank_left ul{ overflow: hidden; }.rank_left ul li{ height:220px; margin-bottom:20px; overflow: hidden; background:#FFF; }.rank_left ul li > i{ float: left; width: 26px; height: 80px; margin: 20px 0 0 -2px; color: #fff; text-align: center; line-height: 80px; font-size: 18px; border-radius: 4px; background: #d2d2d2; }.rank_left ul li .icon1{ background:#ff5550; }.rank_left ul li .icon2{ background:#ffa753; }.rank_left ul li .icon3{ background:#ffe160; }.rank_left ul li .gameContent{ float:left; width:430px; height:220px; padding:20px 0 20px 20px; overflow: hidden; }.rank_left ul li .gameContent .l{ float: left; width:130px; overflow: hidden; }.rank_left ul li .gameContent .l > a{ float:left; display:block; width: 130px; }.rank_left ul li .gameContent .l > .game_img{ height: 130px; overflow: hidden; border-radius: 25px; }.rank_left ul li .gameContent .l > .game_img img{ display:block; width:130px; height:130px; }.rank_left ul li .gameContent .l > .details{ height: 40px; text-align: center; line-height: 40px; font-size: 16px; color: #fff; margin: 10px 0 0; border-radius: 4px; background: #00abcb; }.rank_left ul li .gameContent .r{ float:left; max-width:255px; margin-left:20px; }.rank_left ul li .gameContent .r .r_name{ margin:10px 0; overflow: hidden; }.rank_left ul li .gameContent .r .r_name .r_na{ float: left; font-size: 18px; width:108px; height: 26px; line-height: 26px; margin:-2px 5px 0 0; word-break: break-all; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.rank_left ul li .gameContent .r .r_name .r_type{ float:left; color: #fff; background: #00bab3; height: 20px; line-height: 20px; padding: 0 5px; margin: 2px 5px 2px 0; border-radius: 2px; font-size: 12px; }.rank_left ul li .gameContent .r .company{ font-size:12px; display:block; height:14px; line-height:14px; margin-bottom:5px; } .rank_left ul li .gameContent .r .company:hover{ color:#00b59f; }.rank_left ul li .gameContent .r .score{ height:18px; overflow: hidden; }.rank_left ul li .gameContent .r .score .stars{ display:block; float:left; position: relative; width:96px; height:16px; background:url(../img/star.png) no-repeat; background-position: 0px -17px; margin-right:5px; }.rank_left ul li .gameContent .r .score .stars i{ display:block; width:80%; height:16px; background:url(../img/star.png) no-repeat; position: absolute; top:0px; left:0px; }.rank_left ul li .gameContent .r .score .score_text{ float:left; font-size:14px; color:#ffa75b; height:16px; line-height:16px; }.rank_left ul li .gameContent .r .type{ height:18px; color:#838383; margin-top:5px; }.rank_left ul li .gameContent .r .type span{ padding-right:10px; }.rank_left ul li .gameContent .r .tags{ color:#838383; margin-top:5px; }.rank_left ul li .gameContent .r .tags a{ line-height:18px; color:#333; }.rank_left ul li .gameContent .r .editor{ display:block; height:20px; line-height:20px; margin-top:5px; color:#838383; word-break: break-all; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.rank_left ul li .multi{ width:376px; }.rank_left ul li .multi .rank_img{ display:block; width:118px; min-height:220px; margin-right:5px; }.rank_left ul li .multi .rank_img img{ display:block; width:118px; min-height: 220px; }.rank_left ul li .screen{ width:376px; }.rank_left ul li .screen .rank_img{ display:block; width:376px; height:220px; overflow: hidden; }.rank_left ul li .screen .rank_img img{ display:block; width:376px; min-height:220px; }最终的效果就是如上喽。
