新浪微博（假数据）案例

我们先尝试一下利用假数据来实现新浪微博的布局

css布局：

<style>

.mainbox {

width: 970px;

/* height: 700px; */

background-color:blueviolet;

text-align: center;

}

span {

font-size: 30px;

color: black;

}

.newsbox {

width: 700px;

/* height: 500px; */

background-color:aliceblue;

border: 1px solid black;

margin: 0 auto;

border-radius: 10px;

padding: 10px 0;

}

.title{

width: 100%;

/* height: 30px; */

/* background-color: aquamarine; */

line-height: 30px;

text-align: center;

margin: 10px 0;

}

.imgbox {

width: 400px;

/* height: 300px; */

display: flex;

justify-content: flex-start;

/* background-color: black; */

margin: 0 auto;

}

img{

width: 150px;

height: 15 0px;

}

.bar{

width: 400px;

height: 50px;

/* background-color: blue; */

text-align: center;

line-height: 50px;

display: flex;

justify-content: space-between;

margin: 0 auto;

}

.bar div{

width: 150px;

height: 40px;

margin-top: 5px;

text-align: center;

line-height: 40px;

border-radius: 10px;

border: 1px solid black;

}

</style>

</head>

<body>

</div>

假数据：

var sinadata = {

a: 20,

b: "20条微博",

arr: [{

id: 123,

text: "微博第一条微博第一条微博第一条微博第一条微博第一条",

comment_count: 10,

img: ["https://tenfei03.cfp.cn/creative/vcg/800/new/VCG41N942639296.jpg"],

att_count: 12,

share_count: 30

{

id: 125,

text: "微博第二条我么你从i搜索我么你从i搜索我么你从i搜索我么你从i搜索我么你从i搜索",

comment_count: 15,

img: ["http://picture.ik123.com/uploads/allimg/180814/12-1PQ4140456.jpg"],

att_count: 14,

share_count: 20

{

id: 163,

text: "微博第三条降低哦就发问卷发放降低哦就发问卷发放降低哦就发问卷发放降低哦就发问卷发放",

comment_count: 0,

img: ["https://tenfei03.cfp.cn/creative/vcg/800/new/VCG41N942639296.jpg",

"https://tenfei05.cfp.cn/creative/vcg/veer/1600water/veer-349465619.jpg"

att_count: 65,

share_count: 7987

{

id: 143,

text: "微博第撕太皇太后让他是私人谈话人体和皇太后让他是私人谈话人体和皇太后让他是私人谈话人体和皇太后让他是私人谈话人体和",

comment_count: 100,

img: ["https://tenfei03.cfp.cn/creative/vcg/800/new/VCG41N942639296.jpg",

"https://tenfei05.cfp.cn/creative/vcg/veer/1600water/veer-349465619.jpg",

"https://tenfei03.cfp.cn/creative/vcg/800/new/VCG41N942639296.jpg"

att_count: 125,

share_count: 130

]

}

console.log(sinadata)

</script>

<!--

思路：

1. 创建一个新闻大盒子，把它添加到mainbox中

a. 添加类名

2. 创建一个放标题的盒子，添加到新闻大盒子中

a. 添加文本innerHTML,是mysina中的数据

b. 添加类名，让他们排版在新闻大盒子的上面

3. 创建一个放图片的盒子box2，添加到新闻大盒子中

a. 添加类名，让他们排版在新闻大盒子的中间，写弹性布局让他们内部的图片排列好

4. 根据图片数据的个数创建对应个数的图片标签

a. 把图片全部添加到box2中

b. 给图片加类名

c. 给图片加src

5.底部条

思路和新闻大盒子差不多

6.最后利用for循环遍历我们的数据添加多个mainbox.

-->

js代码：

for(let i=0;i<sinadata.arr.length;i++){

// 1. 创建一个新闻大盒子，把它添加到mainbox中

var mainbox = document.querySelector(".mainbox")

var newsbox = document.createElement("div")

mainbox.appendChild(newsbox)

// a. 添加类名

newsbox.className ="newsbox"

// 2. 创建一个放标题的盒子，添加到新闻大盒子中

// var newsbox = document.querySelector(".newsbox")

var title = document.createElement("div")

newsbox.appendChild(title)

// a. 添加文本innerHTML,是sinadata中的数据

title.innerHTML = sinadata.arr[i].text

// b. 添加类名，让他们排版在新闻大盒子的上面

title.className = "title"

// 3. 创建一个放图片的盒子box2，添加到新闻大盒子中

var imgbox = document.createElement("div")

newsbox.appendChild(imgbox)

// a. 添加类名，让他们排版在新闻大盒子的中间，写弹性布局让他们内部的图片排列好

imgbox.className = "imgbox"

// 4. 根据图片数据的个数创建对应个数的图片标签

// a. 把图片全部添加到box2中

// b. 给图片加类名

// c. 给图片加src

sinadata.arr[i].img.forEach(function (el) {

var img = document.createElement("img")

imgbox.appendChild(img)

img.src =`${el}`

})

// 5.底部条

var bar=document.createElement("div")

bar.className="bar"

newsbox.appendChild(bar)

//a.添加内容

var comment_count=document.createElement("div")

var att_count=document.createElement("div")

var share_count=document.createElement("div")

share_count.className="share_count"

att_count.className="att_count"

comment_count.className=" comment_count"

bar.appendChild(comment_count)

bar.appendChild(att_count)

bar.appendChild(share_count)

comment_count.innerHTML=`评论次数:${sinadata.arr[i].comment_count}`

att_count.innerHTML=`点赞次数:${sinadata.arr[i].att_count}`

share_count.innerHTML=`分享次数:${sinadata.arr[i].share_count}`

}

</script>

过程中遇见的问题：

在给图片添加scr值时，我是利用反引号来添加土拍你的来链接的。利用forEach取出数组中的img属性的值，在后面就可以利用forEach中的形参el来给img.src赋值，代码是====> img.src =`"${el}"`；运行后发现图片无法显示。

在后台打印img.src后发现，原来我去出来的el久带了双引号的，所以不用额外添加引号。

写好一个newsbox时，需要在最外面添加一个For循环来添加多个。添加for循环后，我发现所有的数据都添加给了第一个newsbox其他的newsbox都添加了但是数据并没有装进去。

后面检查代码，发现原来时自己在获取newbox的类时，使用的是

var newsbox = document.querySelector(".newsbox")

document.querySelector（）只会获取符合选项的第一个。