9.1瀑布流

在淘宝等各大的网站我们不难发现.图片的加载都占用整个网页;接下来我们就来实现它, 1 ,css 布局部分 1:给外面做个大的mai_box(给它设置margin:0 auto)放全部的box.给box设置padding:10px 0 0 10px. box里面嵌套一个div.这个div就设边框,再给它padding:10px; 它的里面就是img了; 这布局其实是再简单不过了.但是我们不是有多少图片都全部放在HTML中.我们就是布局一部分,好让我们的思路清晰明了.其实,在瀑布流中图片的加载都是从网络上获取,所以我们就必须动态的创建图片(javascript 来实现) 这里我们就用到前天我们用到的underscore-min.js 框架了 _min 列如 var numbers = [10, 5, 100, 2, 1000];
_.min(numbers);
=> 2
js步骤 : 创建一个假的数组,(当然了,里面可都是货真价值的好东西,他们才是我们工作前的第一要素.) 数组里面放着图片的 src ,(列如 [({src:'21.jpg'},{src:'11.jpg'},{src:'1.jpg'},{src:'12.jpg'})] 他是我们创建图片并加载图片的前提条件 ; 有了这个数组以后,我们就考虑当屏幕被点击滚动触发的时候所发生的事件;滚动吧,就用到定时器了.
一 实现 box_main 居中
二 让第一排不定位 其他都定位
三 判断是不是第一排
求出盒子对应的索引

/**

  • Created by xmg on 2017/5/31.
    */

/***

  • 1.让父盒子水平居中显示(#main)
  • 1.1.设置盒子的width
  • 1.2.设置盒子的margin(0 auto)
  • 2.除了第一行的盒子不需要做定位,其余行的盒子都需要做定位
  • 3.判断什么时候加载后续的其他盒子
  • 4.当满足第三部的加载其他盒子的条件的时候,如果加载出新数据(造数据)
  • **/

function $(tagId) {
return document.getElementById(tagId);
}

window.onload = function () {
//1.让父盒子居中显示
waterFlow('main','box')
}

//瀑布流布局
function waterFlow(parent,box) {
//1.获取所有的盒子
var allBox = $(parent).getElementsByClassName(box);
//2.求出任意一个盒子的宽度
var boxWidth = allBox[0].offsetWidth;

//3.求出当前屏幕的宽度
var clientW = document.body.clientWidth||document.documentElement.clientWidth;

//4.求出每一行显示的盒子
var cols = Math.floor(clientW/boxWidth);
//
// alert(cols);
//5.让父盒子进行居中显示
$(parent).style.width = cols * boxWidth +'px';
$(parent).style.margin = '0 auto';


//2.除了第一行的盒子不需要做定位,其余行的盒子都需要做定位

var heightArr =[];
//遍历所有的子盒子
for(var i=0;i

}

/***

  • 求出最矮盒子在高度数组对应的索引位置
    */
    function getBoxHeightIndex(arr,value) {
    for(var i=0;i {
    //判断
    if(arr[i]==value) return i;
    }
    }

你可能感兴趣的:(9.1瀑布流)