                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /瀑布流布局

absolute,为什么要加绝对定位，是不加以后会乱，可是原是什么，这三种布局具体元，区别是什么，感觉好混乱

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=oBoxs[index].style.left;
                       oBoxs[i].style.left=oBoxs[index].offsetLeft+"px";
                       hArr[index]+=oBoxs[i].offsetHeight;
                   }
       }

13:26

weibo_幸福长大了_0

2016-06-14

源自：瀑布流布局 2-4

关注问题我要回答

1492

操作

收起

1 回答

慕粉3413685 回答被采纳 +3 积分
2016-06-14

存放图片的div都从id为main的父元素div那里继承了位置属性relative。relative是相对于自身原位置的定位，虽然元素不在原位置了，但是还占据着原位置的空间，别的元素不能摆放到那里，就是占着茅坑不拉屎的意思，一个元素占了两个位置；absolute是相对于父元素的定位，元素改变位置后，不再占用原来位置的空间，原位置的空间可以摆放别的元素，有利于元素按自己想要的顺序重新排列。具体relative和absolute的区别可以去W3C的CSS阅读或者百度。

这三种方法布局，其实原理上讲是两个，js和jquery原理一样，css是另一种原理。

js和jquery是通过计算来排序和加载图片的，从第一行开始遍历，找出最矮那一列，把新的图片加到最矮那一列下面，并把新图片的高度加到最矮那一列的高度上，又产生新的最矮的一列，继续遍历，把新的图片加到最矮那一列下面，并把新图片的高度加到最矮一列的高度上，以此类推。等到原始页面上图片都加载完时，从后台读取新的图片按照上面的方法加载到各列。

css3用column-width属性规定每列的宽度，系统会自动计算一屏能分几列，然后把所有的图片自动分列排序，整个过程系统自动完成，不受你的控制，也就是说图片的加载顺序你不能向js那样控制先加载哪个后加载哪个。