SOURCE

var dataSource=new Array(20);
var compileF=doT.template(document.getElementById("template").innerHTML);
document.getElementById("container").innerHTML=compileF(dataSource);
var imgs=document.getElementById("container").querySelectorAll("img");
// document.getElementById("container").scrollTo(0,300)
imgs[8].style.cssText+="border:2px solid red"
// for(var i=0;i<imgs.length;i++){
//   if(i==6){
//     //100+150+10+45+1=306
//     console.log(imgs[i].getBoundingClientRect().top)
//   }
// }
document.getElementById("container").addEventListener('scroll',function(e){
  console.log(imgs[8].getBoundingClientRect().top)
})

var parentTop=document.getElementById("container").getBoundingClientRect().top-window.pageYOffset;
console.log(parentTop)
var targetTop=imgs[8].getBoundingClientRect().top;
console.log(targetTop)

//在一个区间内表示，该元素在视口



//一个55

<div id="container">
  <script type="text/x-dot-template" id="template">
  {{~it:index:value}}
  <img src="http://placekitten.com/g/50/50"/>
  {{~}}
  </script>
</div>

*{
  margin: 0;
  padding: 0;
}
#container{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  width: 125px;
  height: 200px;
  padding: 10px;
  overflow-y:auto;
  border:1px solid #fff;
  margin:auto;
  flex-wrap:wrap;
  margin-top:100px;
  img{
    margin-bottom: 15px;
  }
}