你可以看下前台的html机构 后台只要返回相应格式的json数据然后动态创建js创建html即可
新余网站建设公司创新互联建站,新余网站设计制作，有大型网站制作公司丰富经验。已为新余上1000家提供企业网站建设服务。企业网站搭建\外贸网站制作要多少钱，请找那个售后服务好的新余做网站的公司定做！
将整个系统看做这样一个物理系统：质点和橡皮筋的系统；橡皮筋有个自然长度Length，当橡皮筋被拉长时产生弹力T；任意2个质点间存在反万有引力G（简单的说就是质量产生斥力，和物理系统相反）。当斥力和弹力平衡的时候，布局就结束了，算法简单描述如下：
设系统为G(V,E);
for (vi in V) {
vi.x = random ();
vi.y = random ();
}
while (未平衡) {
for (ei(vx, vy) in E) {
Fx += T(ei, vx, vy);
Ty += T(ei, vy, vx);
}
for (vi in V) {
for (vj in V) {
if (i == j) 跳过
Fi += G (vi, vj);
}
}
for (fi in F) {
vi.x = |fi| * cos(fi.angle);
vi.y = |fi| * sin(fi.angle);
}
}
其中弹力公式T(e, vi, vj)遵循胡克定律：F = Length(e) Length ? K * (Length(e) - Length) : 0; K 为胡克常数，酌情取值
万有引力公式G(vi, vj)遵循牛顿万有引力定律，但方向相反:
F = -G * Mass(vi) * Mass(vj) / (Distance(vi, vj) * Distance(vi, vj)); G 为万有引力常数，酌情取值，Mass(v)为质点v的质量，可直接去定点的边数；Distance(vi, vj)为质点vi 和vj之间的距离，根据勾股定理可到。
系统平衡的标准：合弹力=合斥力，表现为v.x和v.y不再发生变化或震动
注意：当随机初始化后，可能产生2个质点重叠的现象，这时2质点间的斥力可用常数替代，方向随机。若质点无质量，可使用一个小常数替代，如.0005
这是因为图片还没加载完的时候执行了布局。所以出现了这个问题。
要等到图片加载完再布局。
或者设置图片的高度(如果你提前知道宽高，这个应该是最好的)。
或者window的onload事件触发之后再布局(这时候图片都加载完了)。
项目中常用的吸顶效果，如果页面没有固定定位的元素是比较容易实现的，但是如果页面结构比较复杂会有兼容性问题
常见兼容性问题：吸顶元素无法固定，会随着页面滚动抖动
解决方案：页面整体为弹性布局，中间加载部分自适应高度，总体结构为 顶部固定+内容+底部固定
注意整体弹性布局的时候如果要实现吸顶效果，必须将定位元素放到flex=1元素的外层，吸顶的元素需要用两个div，一个是正常显示的，一个是滚动到一定高度固定到顶部的
html:
div class="wrap" id="wrapId"
div class="isFixed" v-if="is_fixed"
div class="topBar" id="fixedTopFixed" ref="topBar"
div class="item" v-for="(item,index) in barList" 吸顶内容/div
/div
/div
div class="flexWrap" :class="is_fixed? 'wrapTop' : 'flex'"
div class="myScroll" v-infinite-scroll="loadMore" infinite-scroll-throttle-delay="500" infinite-scroll-immediate-check="true" infinite-scroll-disabled="busy" infinite-scroll-distance="50"
div class="flexContent"
div class="top" ref="top"
div class="banner"img src="../../../assets/images/文件名/banner.jpg" alt="" srcset=""/div
div class="topBar" id="fixedTop" ref="topBar" v-show="!is_fixed"
div class="item" v-for="(item,index) in barList" @click="tab(index,item)"
不吸顶时展示的内容
/div
/div
/div
div class="scrollContent" id="wrap-content" ref="contentH"
div class="memberList" v-show="infoList.length0" id="content"
div class="myScroll" v-infinite-scroll="loadMore" infinite-scroll-throttle-delay="500" infinite-scroll-immediate-check="true" infinite-scroll-disabled="busy" infinite-scroll-distance="10"
div class="memberItem" v-for="(item,index) in infoList"
加载内容
/div
div class="loading" v-if="loading"
span id="load-text"{{loadText}}/span
/div
/div
/div
div class="empty" v-show="noData"最新达成情况正在更新中...请稍后再来～/div
/div
/div
/div
/div
div class="footer"底部固定/div
/div
js:
data: {
return {
busy: false,
pageNum: 1,
pageSize: 10,
loading: false，
noData: false,
infoList: []
}
}
mounted() {
!--监听滚动--
that.$nextTick(() = {
let scrollDOM = document.querySelector('.flexContent')
scrollDOM.addEventListener('scroll',that.handleScroll)
})
},
methods: {
handleScroll () {
let scrollDOM = document.querySelector('.flexContent')
let scrollTop = scrollDOM.scrollTop;
!--计算滚动高度--
let clientHeight = document.documentElement.clientHeight
if (scrollTop document.querySelector('.banner').offsetHeight) {
this.is_fixed = true;
} else {
this.is_fixed = false;
}
},
!--//触发加载--
loadMore() {
if(this.pageNumthis.pages) {
this.loading = true
this.pageNum+=1
this.busy = true
this.loadData(接口参数,this.pageNum)
}
},
//加载时触发的接口调用
loadData() {
api.XXX({},function(success,data,err){
if(success) {
if(data.status==200) {
//加载逻辑判断
if(data.body.list.length0 pageNum0){
that.infoList = that.infoList.concat(data.body.list)
that.loading = false
}
if(pageNum==data.body.pages || data.body.list20) {
that.loading = true
that.loadText = '没有更多数据了'
}
if(pageNum==1 data.body.list.length==0) {
that.noData = true
that.infoList = []
}
}
}
})
}
}
css:
.isFixed {
width: 100%;
height: 1rem;
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
.myScroll {
height: 100%;
}
.wrap {
width: 7.5rem;
margin: auto;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.flex {
flex: 1;
}
.wrapTop {
padding-top:0.45rem;
}
.flexWrap {
width: 100%;
height: 100%;
}
.flexContent {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.top {
.banner {
position: relative;
img {
width: 100%;
display: block;
}
.month {
position: absolute;
bottom: 0.33rem;
left: 0.45rem;
color: #fff;
font-size: 0.45rem;
}
}
}
.scrollContent {
width: 100%;
background: #fff;
flex: 1;
-webkit-overflow-scrolling: touch;
.memberList {
height: 100%;
padding-top: 0.2rem;
}
}
.footer {
position: fixed;
bottom: 0;
width:7.5rem;
margin: auto;
height:auto;
background:rgba(0,0,0,.7);
}
JS和CSS有区别，没有JS布局的说法，JS的作用是制作动.态网页效果等，是提高用户体验的利器！而CSS是定义网页样式，让网页元素更好的表现给用户，好的的网页表现形式也能提高用户体验！
