调取代码:

show-douban

下载解压丢至 template 文件夹: template_180102.zip

电影页面 https://movie.douban.com/subject/26862829/ 取后面 26862829 为 id 。图书取它的 ISBN 为 id。

效果如下:

源码直出

.douban_item.post-preview(id='db'+id,date-dbid=id)
+h.load("/template/include/douban_item_180102.js")

形成一行 html,包括几个必要属性值,如:

<div id="db9787516810019" date-dbid="9787516810019" class="douban_item post-preview"></div>

然后利用 bitcron 的 load 函数调取 js,好处是 “相同的资源,相同的页面,最多只能载入一次,重复调用不会重复载入。”

Soga,立马上 each 遍历!

$(document).ready(function(){
    $('.douban_item').each(function(){
        var id = $(this).attr('date-dbid').toString()
        if (id.length < 9){
            var url= "https://api.douban.com/v2/movie/subject/"+id
            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'JSONP',
                success: function (data) {
                    var db_casts = "";
                    for(var i in data.casts){
                        db_casts += data.casts[i].name+" ";
                    }
                    $('#db'+id).html("<div class='post-preview--meta'><div class='post-preview--middle'><h4 class='post-preview--title'><a target='_blank' href='"+data.alt+"'>《"+data.title+"》</a></h4><time class='post-preview--date'>"+data.rating.average+"分 / 导演:"+data.directors[0].name+" / 主演:"+db_casts+" / "+data.year+"</time><section style='max-height:75px;overflow:hidden;' class='post-preview--excerpt'>"+data.summary+"</section></div></div><div class='post-preview--image' style='background-image:url("+data.images.large+");'></div>");
                }
            });
        }else if (id.length > 9){
            var url= "https://api.douban.com/v2/book/isbn/"+id
            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'JSONP',
                success: function (data) {
                    $('#db'+id).html("<div class='post-preview--meta'><div class='post-preview--middle'><h4 class='post-preview--title'><a target='_blank' href='"+data.alt+"'>《"+data.title+"》"+data.subtitle+"</a></h4><time class='post-preview--date'>"+data.rating.average+"分 / "+data.author[0]+" / "+data.publisher+" / "+data.pubdate+"</time><section style='max-height:75px;overflow:hidden;' class='post-preview--excerpt'>"+data.summary+"</section></div></div><div class='post-preview--image' style='background-image:url("+data.images.large+");'></div>");
                }
            });
        }else{
            console.log("出错"+ id)
        }
        //alert(id)
    });
});

最后附上样式代码:

/* post-preview --------*/
.post-preview{
    max-width:780px;margin:1em auto;position:relative;display:flex;background:#fff;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.25),0 0 1px rgba(0,0,0,.25);
    .post-preview--meta{
        width:75%;padding:25px;
        .post-preview--middle {line-height:28px;}
        .post-preview--title {
            font-size:18px;margin:0;
            a{text-decoration:none;}
        }
        .post-preview--date{font-size:14px;color:#999;}
    }
    .post-preview--excerpt{
        font-size:14px;line-height:1.825;
        p{margin-bottom:0;}
    }
    .post-preview--image {width:25%;float:right;background-size:cover;background-position:center center;border-top-right-radius: 2px;border-bottom-right-radius:2px;}
}
@media (max-width:550px) {
    .post-preview {
        width:95%;
        .post-preview--image {width:40%;}
        .post-preview--meta {
            width: 60%;
            .post-preview--excerpt{display:none;}
        }
    }
}