В этом примере статьи описывается метод реализации потока водопада Baidu JS. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <Title> имитация Baidu Picture Flow </title> <link rel = "stylesheet" type = "text/css" href = "style.css"> <script src = "js/jquery.min. Подкладка: 0;}#Контейнер {ширина: 1000px; граница: 1px sold#f00; margin: 50px Auto; положение: относительное;}#контейнер img {position: absolute;}#загрузчик {width: 100%; высота: 0px; фон: url (загрузчик.gif). 0. 'localhost/api/json/popular?callback=?'; var iCell=0; var iPage=0; var arrL=[]; var arrT=[]; var iBtn=true; function setCells(){ iCell= Math.floor($(window).innerWidth()/iOuterWidth); if(iCell < 3){ iCell =3; } if(iCell >6){ iCell = 6; if (ibtn) {ibtn = false oloader.show (); $ img.attr ('src', obj.preview); var iheight = iwidth /bj.width * obj.height; var index = getMin (); $ img.appendto (ocontainer); $ img.css ({ширина: iwidth, высота: iheight}); $ img.css ({top: arrt [index], слева: arrl [index]}) arrt [index] += iheight +10; oloader.hide (); }) ipage ++; ibtn = true; })}} $ (window) .on ('resize', function () {var ioldcell = icell; setcells (); var ih = $ (window) .scrolltop ()+$ (window) .innerheight (); var iminindex = getmin (); if (arrt [iminindex]+ocontainer. } if (IOLDCELL == ICELL) $ (this) .Animate ({top: arrt [index], слева: arrl [index]}) arrt [index]+= $ (this) .height () +10; if (arrt [iminindex]+ocontainer.offset (). top <ih) {getData (); var _index = 0; for (var i = 0; i <arrt.length; i ++) {if (arrt [i] <iv) {iv = arrt [i]; _index = i; }} return _index; }}) </script> <body> <div id = "top"> имитация поток водопада Baidu Picture </div> <!-title e-> <div id = "контейнер"> </div> <div id = "Loader"> </div> <!-Блок эффекта e-> </body> </html>Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.