老师你好，在做这个蓝莓派项目首页时，我在想如果按照视频老师讲的那样去设计，会不会引起比较严重的回流和重绘的问题？例如首页的轮播图，视频里老师讲的是只留一个最外层的div元素，其余的元素全部都通过js动态的创建：
<!--顶部轮播 这种做法会引起回流和重绘-->
<div class="dblb"> </div>
//banner.js
(function() {
//首页轮播图
//直接进入页面后自动发送Ajax请求
$.ajax({
type: 'get',
url: 'php/getTopSwiperData.php',
dataType: 'json',
success: function(res) {
// console.log(res.swiperinfo);
var swiperInfoArr = res.swiperinfo;
//选中swiper容器
var dblb = document.querySelector('.dblb');
//构建swiper容器
var swiperhd = document.createElement('div');
swiperhd.className = 'swiper-container swiper-hd';
dblb.appendChild(swiperhd);
//构建wrapper
var swiperhd_wraper = document.createElement('div');
swiperhd_wraper.className = 'swiper-wrapper';
swiperhd.appendChild(swiperhd_wraper);
//构建slide
for (var i = 0; i < swiperInfoArr.length; i++) {
//每一个slide容器
var slideDiv = document.createElement('div'); //创建元素
slideDiv.className = 'swiper-slide'; //给创建的元素添加类名
slideDiv.style.backgroundImage = 'url("' + swiperInfoArr[i].imgUrl + '")'; //给创建的元素添加背景图片
swiperhd_wraper.appendChild(slideDiv);
//每一个slide里面的内容
var contDiv = document.createElement('div'); //创建元素
contDiv.className = 'ss-hd-text ani'; //给创建的元素添加类名
contDiv.setAttribute('swiper-animate-effect', 'bounceInRight'); //创建属性并赋值
contDiv.setAttribute('swiper-animate-duration', '0.3s'); //创建属性并赋值
slideDiv.appendChild(contDiv);
//每一个slide里面的文本标题
var h1 = document.createElement('h1');
h1.setAttribute('align', 'center');
h1.innerHTML = swiperInfoArr[i].dataTitle;
contDiv.appendChild(h1);
//每一个slide里面的文本主体内容
var p = document.createElement('p');
p.innerHTML = swiperInfoArr[i].dataContent;
contDiv.appendChild(p);
}
//构建wrapper平级的pagination
var swiperhd_page = document.createElement('div');
swiperhd_page.className = 'swiper-pagination hd-page';
swiperhd.appendChild(swiperhd_page);
//设置自动轮播
// var mySwiper1 = new Swiper('.swiper-container1', {
// pagination: '.swiper-pagination',
// autoplay: 2000,
// speed: 1000,
// autoplayDisableOnInteraction: false,
// parallax: true,
// loop: true
// });
//swiper构建完毕后初始化
var swiper_hd = new Swiper('.swiper-hd', {
pagination: '.hd-page',
onInit: function(swiper) {
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成，开始动画
},
onSlideChangeEnd: function(swiper) {
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
});
}
});
})();这是按照视频里老师的做法然后设计的轮播图；
然后我就在想可不可以换一种做法，例如首页的乐章部分，我还是像以前的做法那样，把它的静态布局全部写好，只是把需要后台填充的内容部分情况，意思就是只写个框架，然后通过php和js联合去获取后台数据，大致如下：
<!-- 主体内容区域 -->
<div class="main">
<!---------------------乐章板块 start -------------------->
<div class="product p-yz" id="p_yz">
<a class="p-title" href="#">
<span class="p-title-c">乐章</span>
<div class="icon"><img src="" alt="" /></div>
<span class="p-title-e">MOVEMENT</span>
</a>
<div class="p-details">
<div class="swiper-container" id="swiper-container2">
<div class="swiper-wrapper">
<!------------------------ 第一屏4个 start----------------------->
<div class="swiper-slide swiper-p-yz">
<!--产品展示里面的大块,可以动态添加,里面的数据来自后台(需适配)-->
<ul class="clearFix">
<li class="p-yz-cont clearFix">
<div class="p-yz-cont-L">
<a href="#"><img class="artical-pic" src="" alt="" /></a>
</div>
<div class="p-yz-cont-R">
<a href="#" class="artical-title"></a>
<a href="#" class="author"><span></span></a>
<p class="artical-cont"></p>
<div class="time"> <i class="time-icon"></i><i class="p-yz-date"></i><i class="p-yz-hour_minute1"></i></div>
<div class="zan">
<i class="zan-num"></i>
<i class="zan-icon"></i>
<i class="pl-num"></i>
<i class="pl-icon"></i>
</div>
</div>
</li>
<li class="p-yz-cont clearFix">
<div class="p-yz-cont-L">
<a href="#"><img class="artical-pic" src="" alt="" /></a>
</div>
<div class="p-yz-cont-R">
<a href="#" class="artical-title"></a>
<a href="#" class="author"><span></span></a>
<p class="artical-cont"></p>
<div class="time"> <i class="time-icon"></i><i class="p-yz-date"></i><i class="p-yz-hour_minute1"></i></div>
<div class="zan">
<i class="zan-num"></i>
<i class="zan-icon"></i>
<i class="pl-num"></i>
<i class="pl-icon"></i>
</div>
</div>
</li>
<li class="p-yz-cont clearFix">
<div class="p-yz-cont-L">
<a href="#"><img class="artical-pic" src="" alt="" /></a>
</div>
<div class="p-yz-cont-R">
<a href="#" class="artical-title"></a>
<a href="#" class="author"><span></span></a>
<p class="artical-cont"></p>
<div class="time"> <i class="time-icon"></i><i class="p-yz-date"></i><i class="p-yz-hour_minute1"></i></div>
<div class="zan">
<i class="zan-num"></i>
<i class="zan-icon"></i>
<i class="pl-num"></i>
<i class="pl-icon"></i>
</div>
</div>
</li>
<li class="p-yz-cont clearFix">
<div class="p-yz-cont-L">
<a href="#"><img class="artical-pic" src="" alt="" /></a>
</div>
<div class="p-yz-cont-R">
<a href="#" class="artical-title"></a>
<a href="#" class="author"><span></span></a>
<p class="artical-cont"></p>
<div class="time"> <i class="time-icon"></i><i class="p-yz-date"></i><i class="p-yz-hour_minute1"></i></div>
<div class="zan">
<i class="zan-num"></i>
<i class="zan-icon"></i>
<i class="pl-num"></i>
<i class="pl-icon"></i>
</div>
</div>
</li>
</ul>
</div>
<!------------------------ 第一屏4个 end----------------------->
<!------------------------ 第二屏4个 start----------------------->
<div class="swiper-slide swiper-p-yz">
<!--产品展示里面的大块,可以动态添加,里面的数据来自后台(需适配)-->
<ul class="clearFix">
<li class="p-yz-cont clearFix">
<div class="p-yz-cont-L">
<a href="#"><img class="artical-pic" src="" alt="" /></a>
</div>
<div class="p-yz-cont-R">
<a href="#" class="artical-title"></a>
<a href="#" class="author"><span></span></a>
<p class="artical-cont"></p>
<div class="time"> <i class="time-icon"></i><i class="p-yz-date"></i><i class="p-yz-hour_minute1"></i></div>
<div class="zan">
<i class="zan-num"></i>
<i class="zan-icon"></i>
<i class="pl-num"></i>
<i class="pl-icon"></i>
</div>
</div>
</li>
<li class="p-yz-cont clearFix">
<div class="p-yz-cont-L">
<a href="#"><img class="artical-pic" src="" alt="" /></a>
</div>
<div class="p-yz-cont-R">
<a href="#" class="artical-title"></a>
<a href="#" class="author"><span></span></a>
<p class="artical-cont"></p>
<div class="time"> <i class="time-icon"></i><i class="p-yz-date"></i><i class="p-yz-hour_minute1"></i></div>
<div class="zan">
<i class="zan-num"></i>
<i class="zan-icon"></i>
<i class="pl-num"></i>
<i class="pl-icon"></i>
</div>
</div>
</li>
<li class="p-yz-cont clearFix">
<div class="p-yz-cont-L">
<a href="#"><img class="artical-pic" src="" alt="" /></a>
</div>
<div class="p-yz-cont-R">
<a href="#" class="artical-title"></a>
<a href="#" class="author"><span></span></a>
<p class="artical-cont"></p>
<div class="time"> <i class="time-icon"></i><i class="p-yz-date"></i><i class="p-yz-hour_minute1"></i></div>
<div class="zan">
<i class="zan-num"></i>
<i class="zan-icon"></i>
<i class="pl-num"></i>
<i class="pl-icon"></i>
</div>
</div>
</li>
<li class="p-yz-cont clearFix">
<div class="p-yz-cont-L">
<a href="#"><img class="artical-pic" src="" alt="" /></a>
</div>
<div class="p-yz-cont-R">
<a href="#" class="artical-title"></a>
<a href="#" class="author"><span></span></a>
<p class="artical-cont"></p>
<div class="time"> <i class="time-icon"></i><i class="p-yz-date"></i><i class="p-yz-hour_minute1"></i></div>
<div class="zan">
<i class="zan-num"></i>
<i class="zan-icon"></i>
<i class="pl-num"></i>
<i class="pl-icon"></i>
</div>
</div>
</li>
</ul>
</div>
<!------------------------ 第二屏4个 end----------------------->
<!------------------------ 第三屏4个 start----------------------->
<div class="swiper-slide swiper-p-yz">
<!--产品展示里面的大块,可以动态添加,里面的数据来自后台(需适配)-->
<ul class="clearFix">
<li class="p-yz-cont clearFix">
<div class="p-yz-cont-L">
<a href="#"><img class="artical-pic" src="" alt="" /></a>
</div>
<div class="p-yz-cont-R">
<a href="#" class="artical-title"></a>
<a href="#" class="author"><span></span></a>
<p class="artical-cont"></p>
<div class="time"> <i class="time-icon"></i><i class="p-yz-date"></i><i class="p-yz-hour_minute1"></i></div>
<div class="zan">
<i class="zan-num"></i>
<i class="zan-icon"></i>
<i class="pl-num"></i>
<i class="pl-icon"></i>
</div>
</div>
</li>
<li class="p-yz-cont clearFix">
<div class="p-yz-cont-L">
<a href="#"><img class="artical-pic" src="" alt="" /></a>
</div>
<div class="p-yz-cont-R">
<a href="#" class="artical-title"></a>
<a href="#" class="author"><span></span></a>
<p class="artical-cont"></p>
<div class="time"> <i class="time-icon"></i><i class="p-yz-date"></i><i class="p-yz-hour_minute1"></i></div>
<div class="zan">
<i class="zan-num"></i>
<i class="zan-icon"></i>
<i class="pl-num"></i>
<i class="pl-icon"></i>
</div>
</div>
</li>
<li class="p-yz-cont clearFix">
<div class="p-yz-cont-L">
<a href="#"><img class="artical-pic" src="" alt="" /></a>
</div>
<div class="p-yz-cont-R">
<a href="#" class="artical-title"></a>
<a href="#" class="author"><span></span></a>
<p class="artical-cont"></p>
<div class="time"> <i class="time-icon"></i><i class="p-yz-date"></i><i class="p-yz-hour_minute1"></i></div>
<div class="zan">
<i class="zan-num"></i>
<i class="zan-icon"></i>
<i class="pl-num"></i>
<i class="pl-icon"></i>
</div>
</div>
</li>
<li class="p-yz-cont clearFix">
<div class="p-yz-cont-L">
<a href="#"><img class="artical-pic" src="" alt="" /></a>
</div>
<div class="p-yz-cont-R">
<a href="#" class="artical-title"></a>
<a href="#" class="author"><span></span></a>
<p class="artical-cont"></p>
<div class="time"> <i class="time-icon"></i><i class="p-yz-date"></i><i class="p-yz-hour_minute1"></i></div>
<div class="zan">
<i class="zan-num"></i>
<i class="zan-icon"></i>
<i class="pl-num"></i>
<i class="pl-icon"></i>
</div>
</div>
</li>
</ul>
</div>
<!------------------------ 第三屏4个 end----------------------->
</div>
<!--小圆点 -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<!---------------------乐章板块 end -------------------->
</div>
(function() {
//yuezhang1.js
//直接进入页面后自动发送Ajax请求
$.ajax({
type: 'get',
url: 'php/yuezhang1Data.php',
dataType: 'json',
success: function(res) {
var yuezhang1info = res.yuezhang1info;
for (var j = 0; j < yuezhang1info.length; j++) {
//选择元素
var artical_pic = document.querySelectorAll('.artical-pic');
for (var i = 0; i < artical_pic.length; i++) {
artical_pic[i].src = yuezhang1info[j].yzPic;
// console.log(artical_pic[i]);
}
//选择元素
var artical_title = document.querySelectorAll('.artical-title');
for (var n = 0; n < artical_title.length; n++) {
artical_title[n].innerHTML = yuezhang1info[j].articalTitle;
}
//选择元素
var author = document.querySelectorAll('.author');
for (var m = 0; m < author.length; m++) {
author[m].innerHTML = yuezhang1info[j].author;
}
//选择元素
var artical_cont = document.querySelectorAll('.artical-cont');
for (var k = 0; k < artical_cont.length; k++) {
artical_cont[k].innerHTML = yuezhang1info[j].articalCont;
}
//选择元素
var p_yz_date = document.querySelectorAll('.p-yz-date');
for (var l = 0; l < p_yz_date.length; l++) {
p_yz_date[l].innerHTML = yuezhang1info[j].date;
}
//选择元素
var p_yz_hour_minute1 = document.querySelectorAll('.p-yz-hour_minute1');
for (var o = 0; o < p_yz_hour_minute1.length; o++) {
p_yz_hour_minute1[o].innerHTML = yuezhang1info[j].time;
}
//选择元素
var zan_num = document.querySelectorAll('.zan-num');
for (var p = 0; p < zan_num.length; p++) {
zan_num[p].innerHTML = yuezhang1info[j].zan;
}
//选择元素
var pl_num = document.querySelectorAll('.pl-num');
for (var p = 0; p < pl_num.length; p++) {
pl_num[p].innerHTML = yuezhang1info[j].pl;
}
}
//构建pagination
var mySwiper1 = new Swiper('#swiper-container1', {
pagination: '.swiper-pagination',
autoplay: 2000,
speed: 1000,
autoplayDisableOnInteraction: false,
parallax: true,
loop: true
});
function otherLunbo(swiperContainer) {
var mySwiper2 = new Swiper(swiperContainer, {
pagination: '.swiper-pagination',
loop: true,
noSwiping: true,
autoplayDisableOnInteraction: false
});
mySwiper2.params.autoplay = false;
}
otherLunbo("#swiper-container2");
otherLunbo("#swiper-container3");
otherLunbo("#swiper-container4");
otherLunbo("#swiper-container5");
}
});
})();<?php
//yuezhang1Data.php
$success=array('msg'=>'ok');
//连接数据库 pdo方式
try{
$pdo=new PDO('mysql:host=localhost;dbname=lanmeipai;port=3306','root','123456');
}catch(PDOException $e){
echo $e->getMessage();
}
//设置字符集
$pdo->exec('set names utf8');
//查询数据库里的表
$sql="select * from index_yzinfo where 1";
//prepare()方法负责准备要执行的查询
//execute()方法使用一组给定的列参数反复地执行查询
$result=$pdo->prepare($sql);
$result->execute();
//绑定数据
$result->bindColumn(1,$yzPic);//第一例
$result->bindColumn(2,$articalTitle);//第二例
$result->bindColumn(3,$author);//第三例
$result->bindColumn(4,$articalCont);
$result->bindColumn(5,$date);
$result->bindColumn(6,$time);
$result->bindColumn(7,$zan);
$result->bindColumn(8,$pl);
$info=[];//存放数据
//循环输出数据库里的数据
for($i=0;$result->fetch(PDO::FETCH_COLUMN);$i++){
$info[$i]=array('yzPic'=>$yzPic,'articalTitle'=>$articalTitle,'author'=>$author,'articalCont'=>$articalCont,'date'=>$date,'time'=>$time,'zan'=>$zan,'pl'=>$pl);
}
//将索引到的数据放入$success中并进行返回
$success['yuezhang1info']=$info;
echo json_encode($success);
// echo json_encode($success);
?>但是我发现我这样设计后，数据倒是有，但是为什么每一个小模块里的数据获取的都是数据里的最后一个：
希望老师能帮我解决这个问题和疑惑。
最后这是我的源代码：
lanmeipai.zip
还有最后想吐槽一下自己，做项目时感觉好多相关知识都模糊了，然后就是边写项目边回去翻看笔记啥的，然后再接着写，
京公网安备 11011402011233号