ajax json jquery 实现瀑布流

瀑布流布局是一种流行的新闻网站、图片分享网站和社交网站等页面的布局。它的特点是每张图片的高度或宽度不同，但它们会按照网页列的顺序排列。

实现瀑布流布局的方式是通过动态加载图片、文本或其他内容。在这里，我们将使用ajax json和jquery来实现它。

//在html文件中的顶部引入jquery和masonry插件
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>

//创建一个包含图片路径的json数据
var data = [
  {"img": "img/1.jpg"},{"img": "img/2.jpg"},{"img": "img/3.jpg"},{"img": "img/4.jpg"},{"img": "img/5.jpg"},{"img": "img/6.jpg"},{"img": "img/7.jpg"},{"img": "img/8.jpg"},{"img": "img/9.jpg"},];

//使用ajax获取json数据
$.ajax({
  url: "data.json",dataType: "json",success: function(data) {
    //循环遍历json数据并在页面中生成图片
    $.each(data,function(key,value) {
      var img = "<img src='" + value.img + "'>";
      var item = "<div class='item'>" + img + "</div>";
      $(item).appendTo("#content").hide().fadeIn(600);
    });
    //使用masonry插件来进行瀑布布局
    var container = $("#content");
    container.imagesLoaded( function() {
      container.masonry({
        itemSelector: ".item",gutter: 10,isFitWidth: true
      });
    });
  }
}); 

在代码中，我们首先创建了一个包含图片路径的json数据。接着使用ajax来获取json数据，并循环遍历其中的内容，生成图片元素并添加到页面中。最后我们使用了masonry插件来拼接瀑布流布局。

通过以上代码，我们就能轻松实现一个瀑布流布局的页面。