<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.item-box li {
				width: 300px;
				height: 400px;
				border: 1px solid red;
				padding: 10px;
				overflow: hidden;
				float: left;
				margin: 0 20px 20px 0;
				text-align: center;
			}
			
			.item-img {
				width: 250px;
				height: 250px;
			}
			
			a:link {
				text-decoration: none;
			}
		</style>
	</head>

	<body>
		<ul class="item-box">
		</ul>
	</body>

</html>
<script src="../jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function() {
		//获取当前URL地址、隐藏资源真实地址，解决图片引入问题
		function pathUrl() {
			var strUrl = window.location.href,
				arrUrl = strUrl.split("/");
			arrUrl.pop();
			return arrUrl.concat('').join('/');
		}
		//取得当前地址
		var path = pathUrl();
		console.log(path)
		//请求成功的回调函数
		function callBack(data) {
			var data = data.re
			var str = "";
			$.each(data, function(index, item) {
				str += `<li>
                            <a href=${"details.html?did="+item.id}>
                            <img class="item-img" src=${path+item.src} />
                            <div class="item-content">
                                <h3 class="item-title">${item.title}</h3>
                                <p class="item-subtitle">
　　　　　　　　　　　　　　　　　　　　<span class="item-time">${item.time}</span>
　　　　　　　　　　　　　　　　　　　</p>
                            </div>
                            </a>
                        </li>`;
			});
			$('.item-box').html(str);
		};
		//发送请求
		$.ajax({
			type: "get",
			url: "data.json",
			dataType: "json",
			success: callBack
		});

	});
</script>

url的地址是一个data.json文件夹，下面是自己写的假数据，还可以放图片

{
    "re": [
        {
            "id":"0",
            "title": "50城买地1.2万亿元 一线城市地价全线降低",
            "src": "../img/1.jpg",
            "time": "2015-03-17"
        },
        {
            "id":"1",
            "title": "50城买地1.2万亿元 一线城市地价全线降低",
            "src": "../img/2.jpg",
            "time": "2007-06-17"
        },
        {
            "id":"2",
            "title": "50城买地1.2万亿元 一线城市地价全线降低",
           "src": "../img/3.jpg",
            "time": "2017-07-17"
        },
        {
            "id":"3",
            "title": "50城买地1.2万亿元 一线城市地价全线降低",
            "src": "../img/4.jpg",
            "time": "2020-03-17"
        },
        {
            "id":"4",
            "title": "50城买地1.2万亿元 一线城市地价全线降低",
           "src": "../img/5.jpg",
            "time": "2022-03-17"
        }
    ]
}

GitHub 加速计划 / js / json
41.72 K
6.61 K
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支：1 个月前 )
960b763e 3 个月前
8c391e04 6 个月前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区