for 循环遍历数据，根据不同的条件判断动态渲染页面！

整体的逻辑为：for 循环遍历出数据，在for 循环里判断，根据不同的条件渲染

一、html页面结构

二、css就不再写了

　　

三、JS逻辑代码

　　　　　　　　　　var listGroup=''  
                for(var k = 0;k<data.info.categoryNewsList.length;k++){
                    //判断列表图片是否为单图
                    if(data.info.categoryNewsList[k].imgsrc2==null){
                        //如果为单图渲染
                        listGroup += '<ul>
                                        <li class="img-model">
                                            <div class="news-left">
                                                <p class="recommend-h">' + data.info.categoryNewsList[k].title + '</p>
                                                <p class="getTime">'+data.info.categoryNewsList[k].source+'</p>
                                            </div>
                                            <div class="news-right"><img  class="recommend-img" src='+data.info.categoryNewsList[k].imgsrc0+'></div>
                                        </li>
                                    </ul>'
                    }else{
                        //如果为多图渲染
                        listGroup += '<ul>
                                            <li class="imgs-model">
                                                <div>
                                                    <p class="recommend-title">'+ data.info.categoryNewsList[k].title +'</p>
                                                </div>
                                                <div class="recommend-imgs" ><img src='+data.info.categoryNewsList[k].imgsrc0+'><img src='+data.info.categoryNewsList[k].imgsrc1+'><img src='+data.info.categoryNewsList[k].imgsrc2+'></div>
                                                <div class="news-source">'+data.info.categoryNewsList[k].source+'</div>
                                            </li>
                                    </ul>'
                    }    
                }
                $('.recommend-list').append(listGroup)

请求返回的数据为

最终效果图