教育公司网站建设方案,wordpress aws,怎么做个人网站建设,外卖网站建设可行性分析该方法仅满足#xff0c;元素等宽#xff0c;高度一般不同的瀑布流布局
计算元素宽度与浏览器宽度之比#xff0c;得到布局列数#xff1b;将未布局的元素依次布局至高度最小的那一列#xff1b;页面滚动时继续加载数据#xff0c;动态地渲染在页面上。
div id元素等宽高度一般不同的瀑布流布局
计算元素宽度与浏览器宽度之比得到布局列数将未布局的元素依次布局至高度最小的那一列页面滚动时继续加载数据动态地渲染在页面上。
div idparentdiv idmasonry_containerdiv classmasonry_item v-for(item,index) in 10 :keyindexh3标题{{index1}}/h3p内容{{index1}}/p/div/div
/divmasonryLayouts(marginLeft 0, marginTop 0){ // 瀑布流布局var containerWidthdocument.getElementById(masonry_container).width; // 容器的宽度var eleWidth500; // 每个元素宽度为500pxvar colsparseInt(containerWidth/eleWidth); // 瀑布流布局的列数document.getElementById(masonry_container).style.widtheleWidth*colspx;// 设置容器宽度为了居中显示添加positionrelativevar colsHeightnew Array(cols).fill(0);; // 保存每列当前高度初始为0var elesdocument.getElementsByClassName(masonry_item);for(var i0;ieles.length;i){var minHeightCol0; // 保存当前最短列的索引for(var j1;jcols;j){if(colsHeight[j]colsHeight[minHeightCol]){minHeightColj;}}eles[i].style.lefteleWidth*minHeightCol marginLeft px; // 元素定位eles[i].style.topcolsHeight[minHeightCol] px;// position: absolute定位添加左边距和上边距colsHeight[minHeightCol](window.getComputedStyle(eles[i]).height)marginTop ; // 更改当前列高度document.getElementById(masonry_container).style.height ${colsHeight[minHeightCol] 100}px; // 把父容器的高度撑开}
}
