类似淘宝商品

样式

<style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                width: 1068px;
                margin: 10px auto;
            }
            .item{
                width: 225px;
                padding: 10px;
                border: 1px solid gray;
                float: left;
                margin: 10px;
            }
            .item .shop{
                width: 225px;
                height: 360px;
            }
            .item a{
                text-decoration: none;
                color: black;
            }
            .item p{
                text-align: center;
                margin-bottom: 10px;
                font-size: 14px;
                font-weight: 900;
            }
            .item .user img{
                vertical-align: middle;
                border-radius: 50%;
            }
        </style>

JS写法

<script src="jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                
                // 发起get请求
                // http://193.112.122.210/study/getData.php
                $.get('http://193.112.122.210/study/getData.php', {'page':'1'}, function(result){
                    // 确保数据已经获取到
//                   console.log(result)    // 返回结果是字符串!!!
                    
                    // 转为JSON对象
                    var jsonObj = JSON.parse(result)
                    
                    // 数据
                    var dataArr = jsonObj['data']
                    
                    // 遍历数组(渲染操作)
                    for(var i=0; i<dataArr.length; i++){
                        // 对应的商品数据
                        var shopData = dataArr[i]
                        
                        // 创建节点
                        var $item = $('<div></div>').attr('class', 'item').appendTo($('#box'))
                        
                        var $a1 = $('<a href="#"></a>').appendTo($item)
                        $('<img/>').attr('class', 'shop').attr('src', shopData['zs_pic']).appendTo($a1)
                        
                        var $a2 = $('<a href="#"></a>').appendTo($item)
                        $('<p class="detail"></p>').html(shopData['describe'].substring(0,25) + '...').appendTo($a2)
                        var $user = $('<p class="user"></p>').appendTo($a2)
                        $("<img />").attr('src', shopData['avatar_pic']).appendTo($user)
                        $('<span></span>').html(shopData['itemPicList']).appendTo($user)
                    }
                })
                
            })
        </script>