padding是相对于里面的一个盒子的，本来box盒子和里面的盒子是重叠的，现在box盒子用padding撑大了，背景色又是白色，撑大了就有间距的效果，你自己做下实验就知道了

确实挺不错

在js控制.box位置时才加上去的

可能是+20的原因

你需要啥资料？我照老师的代码写了一份，你需要的话，可以给你一个git，你可以去下载

给pic下面的img统一一个宽度。

box是外面的盒子，应该给.pic这个类标签添加浮动，图片才会在一行

点哪里？window有个鼠标样式可以自己设置

根据拖动滚动条加载数据；

window.onload=function(){
waterfall('main','box');
//模拟 从数据库拿到的数据
var dataInt={"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"}，{"src":"3.jpg"}，{"src":"4.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 checkScrollSlide(){
    var oParent = document.getElementById('main');
    var oBoxs=getByClass(oParent,'box');//返回所有父元素标签类名为box的数组
    var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs.[oBoxs.length-1].offsetHeight/2);
    var scrollTop=document.body.scrollTop ||document.documentElement.scrollTop;
    var height=document.body.clientHeight ||document.documentElement.clientHeight;//排除兼容性
    return (lastBoxH<scrollTop+height)?true:false;
}

sublimeText3  使用 Emmet插件,,,

语法格式:

.box*20>.pic>img[src="images/$.jpg"]

不建议这样，你看到的效果图，图片边框与边框的距离，看起来像margin,可以用className为box直接实现，但是老师没有这样做，而是加了className为pic的div，然后在box里面设置padding来实现的，因为后面需要通过实际宽度来计算列数，用box的padding实现的话，box的宽度就是offsetWidth,或者jq的outerWidth(),计算列数直接用clientWidth/offsetWidth就可以了（当然取整要的）；如果用margin来设置这个隔开的间距，那么后面就不能直接用offsetWidth,或者jq的outerWidth(),因为他们的计算方法不包括margin的值，而包括padding的值，所以老师在box里面又加了pic，通过padding制造了一个margin的效果。红线的边框是我后来加的，方便看：其实box与box之间没有margin,而是通过padding实现的看似margin的效果。如果要去掉pic，通过box的margin实现，计算列数就要clientWidth/(offsetWidth+两个margin),然而用js获取这个margin值我不会，，，你会么？我要先定义下，answer.style.marginLeft ="200px";然后通过parseInt(answer.style.marginLeft)才能取出来

闭合标签呢..

opic没有创建   （类似oBox，var oBox=document.createElement('div'); ）要先创建

浮动的特性，最后的那张图片比前面那张的所占的位置要比较小，就相当于撞到障碍物了所以停下来了

就是这样

<img src="图片路径/图片名.jpg">

ps:1:符号是英文状态下的;

2:jpg可以换成其它图片格式

用的是sublime text的emmet插件，输入以下内容:

div*26>img[src="images/$.jpg"]

按ctrl+E即可输出

【强】

将两个for循环中，i的初始化值由1改为0再试试。

设置一下图片的宽度.

第一种情况是第六张的高度是第一行最小的，这就是对的；第二种情况是，你的定位，没定好，可能是索引出问题了。

可以不要嵌套啊，多给他们一个相同的类名就好

明显视频剪接

..?

不能吧