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)

請求返回的數據為

最終效果圖