<div class="container">

			<ul>

				<li>

					<div id="first" class="pic"><img src="" alt="" trueimg="./img/HBuilder.png" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000001</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000002</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000003</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000004</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000005</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000006</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000007</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000008</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000009</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000010</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000011</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000012</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000013</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000014</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000015</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000016</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000017</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000018</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000019</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000020</div>

				</li>

			</ul>

		</div>

            * {

                margin:;

                padding:;

                box-sizing: border-box;

            }

            li {

                margin-top: 10px;

                border-bottom: 1px solid #000;

                list-style: none;

                height: 100px;

            }

            .pic {

                width: 200px;

                padding: 10px;

                height: 100px;

                float: left;

                background: url(img/timg.gif) no-repeat center center;

                background-size: cover;

                background-origin: content-box;

            }

            .pic img {

                opacity:;

                display: none;

                border: 1px solid #000;

                width: 100%;

                height: 100%;

            }

            li:last-child {

                margin-bottom: 10px;

            }

            .txt {

                height: 100px;

                line-height: 100px;

                overflow: hidden;

            }

var imgList = document.querySelectorAll("img");

            var len = imgList.length;

            function loadImg(curImg) {

                var truesrc = curImg.getAttribute("trueimg");

                var oImg = new Image();

                var curPar = curImg.parentNode;

                oImg.src = truesrc;

                oImg.onload = function() {

                    curImg.src = this.src;

                    curImg.style.display = "block";

                    curPar.style.background = "none";

                    fadeIn(curImg);

                    oImg = null;

                }

                curImg.isLoaded = true;

            }

            function fadeIn(curImg) {

                var tar = 1;

                var interval = 10;

                var duration = 500;

                var step = (tar / duration) * interval;

                var curOp = parseFloat(getComputedStyle(curImg, null)["opacity"]);

                var timer = window.setInterval(function() {

                    if(curOp > 1) {

                        curImg.style.opacity = 1;

                        window.clearInterval(timer);

                    }

                    curOp += step;

                    curImg.style.opacity = curOp;

                }, interval);

            }

            function handleImg() {

                for(var i = 0; i < len; i++) {

                    var curImg = imgList[i];

                    if(curImg.isLoaded) {

                        continue;

                    }

                    var curPar = curImg.parentNode;

                    var a = curPar.clientHeight + curPar.offsetTop;

                    var b = document.documentElement.clientHeight + document.documentElement.scrollTop;

                    if(a < b) {

                        loadImg(curImg);

                    }

                }

            }

            setTimeout(handleImg, 1000);

            window.onscroll = handleImg;