从JSON取数据实现图片瀑布流布局的数据动态加载

本文介绍如何实现图片瀑布流布局,并通过JSON数据动态加载。首先,设置infinitescroll函数,将dataType设为"json",利用template回调函数处理JSON数据,返回HTML格式的瀑布流块。itemSelector指定块的类,nextSelector定义加载链接选择器。JSON源数据包含url和height,用于构建每个瀑布流块。未来计划研究通过数据库调用数据以进一步实现动态加载。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前段时间,做一个网站要用到图片的瀑布流布局。自己当时在网上找了一个仿花瓣网的瀑布流源码,不过它的数据是调用静态页面,繁杂,重用性差。我寻思着实现通过JSON调用数据。

目录结构如下:

waterfall
——>css
   ——>style.css
——>js
   ——>jquery-1.9.1.js
   ——>jquery.infinitescroll.min.js
   ——>jquery.masonry.min.js
——>img
   ——>1.jpg , 2.jpg , 3.jpg --- 8.jpg
——>index.html
——>json.txt

先分析首页(index.html):

主要是infinitescroll函数的参数设置。

dataType参数设为“json”,即接受JSON格式的数据,如下:

dataType: 'json',

template参数,将从JSON传回的数据data传递给回调函数,回调函数要返回一个字符串,此字符串需要把data利用JS转换成瀑布流块的HTML格式。如下:

template: function(data) {
  var more = '';
  for(i = 0; i < data.pic.length; i++){
    more = more + '<div class="pin wfc wft"><a class="img x" href="/pins/60411519/" target="_self"><img src="' + data.pic[i].url +'" width="192" height=' + data.pic[i].height + '><span styl
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值