ie 7下兼容性问题,跪求帮助..


<!DOCTYPE html >
     <head>
         <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
         <style type"text/css">
             ul {
                 list-style:none;
                 height:auto;
                 float:left;
                 width:100%;
                 padding: 0;
                 margin: 0px;
                 border: 1px solid red;
             }
             li {
                 list-style-type:none;
                 float:left;
                 margin-left:8px;
                 border: 0px solid white;
             }
         </style>
         <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js">
         </script>
     </head>
     <body>
         <div>
             <ul id="waterFallFlow">
                 <li class='waterLine_0 waterFallLine'>
                 <div> <img class='loaded' src='1'></div>
                 <div> <img class='lazy' src='2'></div>
                 <div> <img class='lazy' src='3'></div>
                 <div> <img class='lazy' src='4'></div>
                 <div> <img class='lazy' src='5'></div>
                 </li>
                 <li class='waterLine_1 waterFallLine'>
                 <div> <img class='loaded' src='6'></div>
                 <div> <img class='lazy' src='7'></div>
                 <div> <img class='lazy' src='8'></div>
                 <div> <img class='lazy' src='9'></div>
                 <div> <img class='lazy' src='10'></div>
                 </li>
                 <li class='waterLine_2 waterFallLine'>
                 <div> <img class='loaded' src='11'></div>
                 <div> <img class='lazy' src='12'></div>
                 <div> <img class='lazy' src='13'></div>
                 <div> <img class='lazy' src='14'></div>
                 <div> <img class='lazy' src='15'></div>
                 </li>
                 <li class='waterLine_3 waterFallLine'>
                 <div> <img class='loaded' src='16'></div>
                 <div> <img class='lazy' src='17'></div>
                 <div> <img class='lazy' src='18'></div>
                 <div> <img class='lazy' src='19'></div>
                 <div> <img class='lazy' src='20'></div>
                 </li>
             </ul>
         </div>
     </body>
     <script type="text/javascript">
         $(document).ready(function() {
                 var num = 4;
                 var obj = '';
                 setInterval(function() {
                     var dataArr = [];
                     for(var i=0;i<num;i++) {
                         obj = $(".waterLine_"+i+" .lazy :first");
                         if(obj[0] != undefined) {
                              dataArr.push(obj[0]);
                          }
                     }
                     num = dataArr.length;
                     if(num>0) {
                             for(var i=0;i<num;i++) {
                                 dataArr[i].setAttribute('class','loaded');
                                 dataArr[i].setAttribute('src','http://s1.dwstatic.com/group1/M00/ED/5F/962f229b9168cd1495bd35fc56de73b4.jpg');
                                 }
                         }
                         dataArr = null;
                     },500);
         });
     </script>
 </html>ie8下代码运行正常,会从每一个li的第2个div开始依次显示图片
但是在ie7下,每一个li下的第2个div改变后就不会依次往下显示了..
这是什么原因,求解.