从零开始——瀑布流页面（4）接口数据前端呈现

前面几节内容我们已经挑选好了一个前端样式并且完成了接口的编写，今天这一节就可以看到最终的结果了，请开始我们的表演。
我们写个js，把接口内容推送到页面上，直接上代码

$(document).ready(function () {
    var html = '';
    $.ajax({
        url: 'http://127.0.0.1:8080/test_post/media',
        type: 'post',
        dataType: 'json',
        async: false,
        success: function (result) {
            for (var i = 0; i < result.length; i++) {
                var html = "<div data-sjsel=" + result[i].level + "><div class=\"card\"><img class=\"card__picture\" src=\""+ result[i].pic+"\"><div class=\"card-infos\"><a href=" + result[i].url + " target=\"_blank\"><h3 class=\"card__title\">" + result[i].title + "</h3><p class=\"card__text\">" + result[i].media + "</p><p class=\"card__text\">" + result[i].date + "</p></a></div></div></div>";
                var $html = $(html);
                $(".sjs-default").append($html);
            }
			var html2 = "<script type=\"text/javascript\">document.querySelector(\"#sortable\").sortablejs()</script>";
			var $html2 = $(html2);
			$(".sjs-default").append($html2);
        }
    });
});

是不是很短，很简单。大概解释下，我们这一段的js主要就是把一个完整的div模块，也就是一条数据推送到前端。那我们一共有多少组数据呢，result.length条！
迫不及待我们看下前端结果：

是不是有内个味了，我们再看下手机端的效果

天秀！这样我们四部完成了一个简单的瀑布流界面