瀑布流布局_技术问答

蒹葭苍沧

在浏览器页面中，左上角第一个盒子的左边有一部分空白，那是什么啊: 明白了，那是页面居中对齐?; 2020-01-07 1回答·1466浏览

虞粥粥

为什么不能直接用class名获取元素，多了那么多步骤看得晕乎乎的: 因为IE浏览器不支持getElementsByClassName这个方法所以我们都是设置一个函数来通过类名获取变量。已解决; 2019-10-31 1回答·959浏览

慕桂英6396625

var cols = Math.floor(document.documentElement.clientWidth/oBoxW); console.log(cols); //设置main的宽度 oParent.style.cssText = 'width:' + oBoxW*cols + 'px;margin:0 auto';: cols的值是根据浏览器窗口的宽度动态计算出来的; 2019-10-15 1回答·957浏览

请让我安静一会儿

浮动的元素有嵌套啊,为什么: 我想说的是浮动地元素在排列在一行时，不是顶端对齐呀，如果不够一排，不是换行显示，等到第二排，时，那么第二排，不是以第一排浮动地元素排列的元素最下端为顶点啊，不知道我说的你明白不; 2019-09-19 2回答·950浏览

慕慕0116261

offsetWidth这个属性究竟是什么意思？: 已采纳慕前端2229331 的回答; 元素的实际宽度，包括padding 和 border 应该是这样，希望能帮到你; 2019-08-08 1回答·2257浏览

qq_慕粉7082047

控制台报错 var oelements = parent.getElementsByTagName('*');: 知道了，原来我html里面写的是class 所以用byid 出不来，要把class换成id; 2019-06-10 1回答·886浏览

qq_慕后端7059291

控制台报错: 应该是waterfall函数里oParent有没有获取到#main元素.后面通过tagName获取元素oElements=parent.getElementByTagName('*');getElementByTagName应该是getElementsByTagName; 2019-06-09 1回答·842浏览

qq_活出自己的模样_0

为什么不这样获取main里的所有box盒子， var oBoxs = oParent.getElementsByClassName(box): 已采纳桂小太郎的回答; 因为这些盒子和里面的图片是需要根据接收到的后台数据，动态创建出来，再渲染到页面上的；
只有 getElementsByTagName 可以获取到动态创建的 DOM，getElementsByClassName、querySelectorAll 这些都只能获取前端写死的数据。; 2019-02-12 1回答·1259浏览

qq_陈翻车鱼_0

控制台报错

function getByClass(parent,clsname) {

var boxarr = new array(),

OElements = parent.getElementsByTagName('*');

for (var i = 0; i < OElements.length; i++) {

if (OElements[i].className == clsname) {

boxarr.push(OElements[i]);

}

return boxarr;

}

2018-12-18 1回答·1085浏览

小雪雪3789253

怎么计算id为main的总高度啊

document.getElementById('main').offsetHeight

2018-07-12 1回答·1085浏览

爱笑的小眼睛

获得class为box的所有元素

var boxs=document.querySelectorAll("div[class='box']");还可以使用这个啊，里面的参数符合css规范可以很方便查出
所有class为box的div

2018-03-01 3回答·2667浏览

香宝的夫差

参数想不通: waterfall是实现瀑布流的函数对吧，而parent和box是获取两个值对吧（box子元素要从parent父元素里面找），那么就需要有东西来接收这两个值，所以定义了oParent这个对象来接收parent这个值（父元素），oBox是存放所有class为box的数组，里面放着class="box"的全部的盒子，一个盒子是一个值，我们要控制这些值来达到控制盒子的目的，getByclass一个功能的函数，所以单独封装成一个函数了，这里创建这个函数是为了从“main”中获取子元素“box”，main为box的父元素，所以用parent来定义; 2018-02-06 2回答·1000浏览

慕仰9551813

就盒子问题: 15px 是padding，不是margin，没用margin属性; 2018-01-23 1回答·1117浏览

慕仙5237505

截图的7，8 行获得class类的用法，及cssText 语法属于哪个版本及语义,求详解: 就是将最外层的div设置为水平居中对齐呀; 2017-11-18 2回答·848浏览

Holajulie

Uncaught TypeError: Cannot set property 'cssText' of undefined: 我知道了，因为我的boxes是数组不是一个元素嘻嘻; 2017-10-30 1回答·1888浏览

我就是个小人物

关于waterfall参数的问题

js里面的waterfall其实也可以不用放参数，你可以试一下。个人觉得放参数的目的是为了将这个函数传入不同的参数以便多次应用。但是本课中不放参数也没什么影响的地方。

function waterfall(){
    var oParent = document.getElementById('container');
    var oBoxs = oParent.getElementsByClassName('box');
    //获取一行能放几张图片
    var boxWidth = oBoxs[0].offsetWidth;
    var cols = Math.floor(window.innerWidth/boxWidth);
    var oContainer = document.getElementById('container');
    oContainer.style.width=cols*boxWidth+'px';
    var oBoxH =[];
    for(var i=0;i<oBoxs.length;i++){
        if(i<cols){
            //定义一个数组用来保存每一行的高度
            oBoxH[i]= oBoxs[i].offsetHeight;
        }else{
            //找到oBoxH中高度最小的元素
            var minH = Math.min.apply(null,oBoxH);
            var index = getminHIndex(oBoxH,minH);
            oBoxs[i].style.position='absolute';
            oBoxs[i].style.left=index*boxWidth+'px';
            oBoxs[i].style.top = minH + oBoxs[index].offsetTop+'px';
            oBoxH[index]+=oBoxs[i].offsetHeight;
        }
    }
}

这个是jQuery的。

function waterfall(){
    var $boxs = $('.box');
    var w = $boxs.eq(0).outerWidth();
    var cols = Math.floor($(window).width()/w);
    $('#container').css('width',cols*w);
    var hArr =[];
    $boxs.each(function(index,value){
        if(index<cols){
            hArr[index]=$boxs.eq(index).outerHeight();

        }else{
            var minH = Math.min.apply(null,hArr);
            var minHIndex = $.inArray(minH,hArr);
            $(value).css({
                'position':'absolute',
                'top':minH+'px',
                'left':minHIndex*w+'px'
            });
            hArr[minHIndex]+=$(value).outerHeight();
        }

    })
}

刚学完瀑布流，新人勿喷。

2017-08-18 1回答·1887浏览

qq_黑色星空_0

我怎么返回的是1: 我解决了我把包括mian在内的div全部复制粘贴了 hhhhhh...; 2017-08-18 2回答·1259浏览

我就是个小人物

关于参数的问题: JQuery都直接获取了... 你还想传啥?; 2017-08-17 1回答·937浏览

葡萄3

请问如何在js中获得改变后页面的宽度: 2017-07-20 2回答·1029浏览

葡萄3

反复检查，不知道哪里错了: 。。。。知道哪里错了; 2017-07-20 2回答·988浏览

厂厂

修改了图片宽度为360px，页面就重叠了？: 样式没问题，应该是js部分出错了; 2017-05-25 1回答·1107浏览

A回不去的曾经

关于改变页面大小后，列数改变问题: 已采纳慕容7325228 的回答; 因为我们仅仅是设置了页面的宽度，没有给img设置固定位置; 2017-05-10 2回答·1158浏览

weibo_happy的小小明_0

document.documentElement和document.body: body是DOM对象里的body子节点，即 <body> 标签；
documentElement 是整个节点树的根节点root，即<html> 标签；; 2017-05-04 1回答·602浏览

慕粉Wo

getElementsByTagName(): 我有个方法，试试吧var oParent=document.getElementById('parent');当中的引号去掉，他们就能找到main元素，然后就正常了; 2017-04-24 3回答·790浏览

慕粉1859391281

一直显示这个Cannot read property 'style' of null

视频中

Ma.style.cssText = 'width:'+oBoxW*cols+'px;margin:0 auto';

是在waterfall函数里的我贴下我的整个代码你参考下吧

window.onload = function() {

waterfall('main', 'box');

//模拟后台过来的JSON数据

var dataInt = {"data":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'}]}

window.onscroll = function() {

if (checkScrollSlide){

var oParent = document.getElementById('main');

//将数据块渲染到当前页面的尾部

for (var i = 0; i < dataInt.data.length; i++) {

var oBox = document.createElement('div');

oBox.className = 'box';

oParent.appendChild(oBox);

var oPic = document.createElement('div');

oPic.className = 'pic';

oBox.appendChild(oPic);

var oImg = document.createElement('img');

oImg.src = "images/" + dataInt.data[i].src;

oPic.appendChild(oImg);

}

//再将新数据排列

waterfall('main', 'box');

}

function waterfall(parent, box) {

//将main下的所有class为box的元素取出来

var oParent = document.getElementById(parent);

var oBoxs = getByClass(oParent, box);

//计算页面显示的列数(页面宽/box的宽)

var oBoxW = oBoxs[0].offsetWidth;

//document.documentElement.clientWidth获取用户页面宽度

var cols = Math.floor(document.documentElement.clientWidth / oBoxW);

//动态设置main div的宽度和居中

oParent.style.cssText = 'width:' + oBoxW * cols + 'px;margin:0 auto';

var hArr = [];

for (var i = 0; i < oBoxs.length; i++) {

if (i < cols) {

hArr.push(oBoxs[i].offsetHeight);

} else {

var minH = Math.min.apply(null, hArr);

var index = getMinhIndex(hArr, minH);

oBoxs[i].style.position = 'absolute';

oBoxs[i].style.top = minH + 'px';

//oBoxs[i].style.left = oBoxW*index + 'px';

oBoxs[i].style.left = oBoxs[index].offsetLeft + 'px';

//添加图片后最小值加上他下面那张图片的高度

hArr[index] += oBoxs[i].offsetHeight;

}

//根据class获取元素

function getByClass(parent, clsName) {

var boxArr = new Array(), //用来存储获取到的所有class为box 的元素

oElements = parent.getElementsByTagName('*');

for (var i = 0; i < oElements.length; i++) {

if (oElements[i].className == clsName) {

boxArr.push(oElements[i]);

}

return boxArr;

}

function getMinhIndex(arr, val) {

for (var i in arr) {

if (arr[i] == val) {

return i;

}

//检测是否具备加载数据块的条件

function checkScrollSlide(argument) {

var oParent = document.getElementById('main');

var oBoxs = getByClass(oParent, 'box');

//oBoxs[oBoxs.length-1].offsetTop最后一个盒子距离整个页面顶部的距离

// lastBoxH 最后一个盒子一半到整个页面顶部的距离

var lastBoxH = oBoxs[oBoxs.length - 1].offsetTop + Math.floor(oBoxs[oBoxs.length - 1].offsetHeight / 2);

//混杂模式document.body.scrollTop 标准模式document.documentElement.scrollTo 获取滚动的高度

var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

var height = document.body.clientHeight || document.documentElement.clientHeight;

return (lastBoxH<scrollTop+height)?true:false;

}

2017-04-10 1回答·5824浏览

慕粉3596818

老是提示 Cannot read property 'getElementsByTagName' of null: 已采纳正在睡觉的回答; 我也是~; 2017-04-09 4回答·2733浏览

lin5_mumu

为什么js一直报错?: 已采纳慕桂英3113315 的回答; 0.0声明错了啊，你声明数组完了后用的；号，改成逗号就好了~; 2017-04-03 2回答·1172浏览

咖啡学者

怎么回事？我导入js脚本，样式就无效了？: 。。。。。。。。这哥们很可以啊。。。。。。; 2017-04-01 7回答·1648浏览

any_do

main的宽度与clientWidth有什么区别啊？: clientwidth=width+padding,main的宽度指的就是width的值; 2017-03-24 2回答·1026浏览

不完美

列数还是会变: document.documentElement.clientWidth本来就是获取当前页面的宽度，所以刷新了列数变化了是正常的; 2017-03-10 2回答·583浏览