大佬教程收集整理的这篇文章主要介绍了jQuery：’加载更多’砖石元素？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我需要做的是使用animate.css为加载的元素设置动画.@H_616_7@
为了解释这一点,我创造了这个小提琴：@H_616_7@
https://jsfiddle.net/89v781rL/6/@H_616_7@
向下滚动以查看“显示更多”按钮并单击它以查看其运行情况.@H_616_7@
当我加载更多项目时,元素是动画的,但因为它们是以砌体风格布局,它们的位置不断变化,这不是我想要的.基本上我需要将元素保持在第一个位置并继续添加/加载更多元素.@H_616_7@
如果您注释掉以下CSS代码并运行JSfiddle,您将看到元素的布局有多好,这也是我希望它们在一次加载5时的样子：@H_616_7@
#grid li:nth-child(n+6) { /*display: none;*/ }
我需要做的是使用animate.css将元素反弹.@H_616_7@
$('#SALEs').click(function() {
$('#grid li').not(':visible').slice(0,5).slideDown();
$('#grid li').not(':visible').slice(0,5).addClass('animated bounceInUp');
});
主要是因为它对我的项目而言非常庞大和臃肿,并且它在我的项目中也无法正常运行.@H_616_7@
有人可以就这个问题提出建议吗？@H_616_7@
编辑：@H_616_7@
https://jsfiddle.net/89v781rL/8/@H_616_7@
还有这个：@H_616_7@
Proposed solution.
简单地说,你想要的是不可能的.至少不是你如何开始它.@H_616_7@
但是,这就是问题：我进入编码的原因(来自设计背景 – 以及我回答你的问题的主要原因)是因为一群网络开发人员告诉我我所做的特定设计,这是不可能的.所以我(重新)进行了搜索和实验,直到我找到了方法.@H_616_7@
从那以后,每当我得出这个结论时,我总是把它翻译成：
这是可能的,我只是做错了.@H_616_7@
在您的特定情况下,您使用的是“砖石”技术,这种技术并不完全是砖石结构.这是一种名为CSS columns的列布局技术.从技术角度来看,这就是它的作用：@H_616_7@
>计算列的宽度,考虑父总宽度,列数和列装订线
>根据得到的列宽计算内容的总高度
>将内容分成适合列的块,尝试平等分配内容,尊重任何break-inside声明.请注意属性值的暗示名称：避免,不禁止或禁止.根据内容,此规则并不总是适用.@H_616_7@
但是,简而言之,这里是您的2列布局最初呈现的方式：@H_616_7@
1 4 2 5 3 6
当您决定添加更多内容时,它将再次执行上述步骤,考虑到更新的内容高度导致：@H_616_7@
1 5 2 6 3 7 4
它将计算可能的破坏选项,并将用于导致父元素的最小高度的选项.如果两个或多个结果具有相同的高度,则大多数浏览器将选择使较晚/最后一列更短的浏览器.@H_616_7@
如果您的内容在渲染后需要保留到位,那么CSS columns技术显然不是一种选择.所以你正在研究使用绝对定位的技术.你有很多选择,但值得注意的是(我可能是主观的 – 但是有人真正客观吗？)是：@H_616_7@
> Masonry.它配备了非常方便的stamp方法,专门针对您的要求而设计(将现有元素粘贴到位,因此添加更多内容不会重新定位现有元素 – 这可能偶尔会发生,具体取决于内容和父级 – 例如,如果你有一个现有的短项目列表,并且你添加了一个非常高的项目,它将导致一列比其他项目更高;如果没有在现有项目上调用标记,它们将被重新定位,以便生成的列具有高度差异最小)
> Isotope – 我从来没有机会使用它,但我听到了很好的事情.
>所谓的pinterest布局脚本.它是由Evan Sharp编写的,它完全依赖于javascript和绝对定位(就像Masonry一样)但效率非常高.他解释了他是如何做到的in this SO answer,这是关于这项技术的good tutorial.如果你不太关心技术部分并且只对果汁感兴趣,我发现了一个名为Bootstrap Waterfall的轻量级插件,除了上面列出的所有内容外,还有一个生产就绪的可用版本.@H_616_7@
到目前为止我写的所有东西都是一点点时间和体面的搜索 – 你会得到的.@H_616_7@
剩下的唯一步骤(以及真正的答案)是使用所需的animate.css效果将每个项目动画化为视图.我为布局选择了Bootstrap-waterfall,但您也可以选择任何其他选项.这里是：@H_616_7@
// Included waterfall script as it doesn't load from github for everyone +function(t){"use @R_450_10495@ct";function i(i){this.$pins=i,this.tasks=[],this.timerId=null,this.deferred=new t.DeferreD}function e(t){this.img=t,this.initialWidth=t.width,this.initialHeight=t.height}function n(i){return this.each(function(){var e=t(this),n=e.data("mystist.waterfall"),s="object"==typeof i&&i;n&&"@R_450_10495@ng"!=typeof i&&n.destroy()&&(n=null),n||e.data("mystist.waterfall",n=new o(this,s)),"@R_450_10495@ng"==typeof i&&n[i]()})}var s=s||{Now:Date.Now||function(){return(new DatE).getTime()},throttle:function(t,i,E){var n,o,r,a=null,h=0;e||(e={});var l=function(){h=e.leading===!1?0:s.Now(),r=t.apply(n,o),a||(n=o=null)};return function(){var u=s.Now();h||e.leading!==!1||(h=u);var c=i-(u-h);return n=this,o=arguments,0>=c||c>i?(a&&(clearTimeout(a),a=null),h=u,a||(n=o=null)):a||e.Trailing===!1||(a=setTimeout(l,C)),r}},debounce:function(t,a,h,l=function(){var u=s.Now()-a;i>u&&u>=0?n=setTimeout(l,i-u):(n=null,e||(h=t.apply(r,n||(r=o=null)))};return function(){r=this,a=s.Now();var u=e&&!n;return n||(n=setTimeout(l,i)),u&&(h=t.apply(r,r=o=null),h}}},o=function(i,E){this.$element=t(i),this.options=t.extend({},o.DEFAULTS,E),this.id=Math.random().to@R_450_10495@ng().slice(2),this.$fakePin=null,this.$container=null,this.$pins=null,this.pinWidth=null,this.imgWidth=null,this.lefts=[],this.tops=[],this.init().calculateWidth().calculatePosition().sail(),t(window).on("resize.mystist.waterfall"+this.id,s.debounce(t.proxy(function(){t(window).off("scroll.mystist.waterfall"+this.id),this.calculateWidth().calculatePosition().ship(r.getLoadedPins.call(this))},this),777))};o.VERSION="0.2.4",o.DEFAULTS={},o.prototype.init=function(){return this.initPins().initAttributes(),this},o.prototype.initPins=function(){var i=this.$element.children().length>0?this.$element.children().remove():t(this.$element.data("bootstrap-waterfall-template"));return i.each(function(){var i=t(this).find("img:eq(0)");i.length>0&&(t(this).data("bootstrap-waterfall-src",i.attr("src")),i.attr("src","data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="))}),this.$pins=i,o.prototype.initAttributes=function(){return this.$fakePin=this.$pins.first().clone(),this.$container=t("<div />").css("position","relative"),this.$element.html(this.$container),o.prototype.calculateWidth=function(){var t=this.$fakePin.clone();return this.$container.append(t.css("opacity",0)),this.pinWidth=t.outerWidth(!0),this.imgWidth=t.find("img:eq(0)").css("width","100%").width(),t.remove(),o.prototype.calculatePosition=function(){for(var t=parseInt(this.$container.width()/this.pinWidth,10),i=[],e=[],n=0;t>n;n++)i.push(n*this.pinWidth),e.push(0);return this.lefts=i,this.tops=e,o.prototype.sail=function(){var e=r.getToLoadPins.call(this),n=new i(E);return n.load().run().deferred.done(t.proxy(function(){this.ship(E)},this)),o.prototype.ship=function(i){return this.render(i).updateHeight(),t(window).on("scroll.mystist.waterfall"+this.id,s.throttle(t.proxy(function(){r.isWantMore.call(this)&&(t(window).off("scroll.mystist.waterfall"+this.id),this.sail())},500)),o.prototype.render=function(i){var e=this;return i.each(function(){e.placePin(t(this))}),o.prototype.placePin=function(t){var i=a.indexOf(this.tops,Math.min.apply(null,this.tops)),e=r.getPosition.call(this,i);return t.css({position:"absolute",left:e.left,top:e.top}),t.data("bootstrap-waterfall-pin")&&r.setImageHeight.call(this,t),t.data("bootstrap-waterfall-src")&&(r.makeImageAvailable.call(this,t.removeData("bootstrap-waterfall-src")),this.$container.append(t),r.updatePosition.call(this,o.prototype.updateHeight=function(){var t=a.indexOf(this.tops,Math.max.apply(null,this.tops));return this.$container.height(this.tops[t]),o.prototype.destroy=function(){return t(window).off("scroll.mystist.waterfall"+this.id),t(window).off("resize.mystist.waterfall"+this.id),this.$element.empty().removeData("mystist.waterfall"),this};var r={getToLoadPins:function(){var i=parseInt(this.$container.width()/this.pinWidth,e=3*i,n=this.$pins.map(function(){return t(this).find("img").length>0&&t(this).data("bootstrap-waterfall-src")?t(this):void 0});return n.slice(0,E)},getLoadedPins:function(){var i=this.$pins.map(function(){return t(this).find("img").length>0&&!t(this).data("bootstrap-waterfall-src")?t(this):void 0});return i},isWantMore:function(){return t(window).scrollTop()+t(window).height()>a.getDocHeight()-377?!0:!1},getPosition:function(t){var i={left:this.lefts[t],top:this.tops[t]};return i},setImageHeight:function(t){var i=t.data("bootstrap-waterfall-pin"),e=this.imgWidth*i.img.height/i.img.width;t.find("img:eq(0)").css({height:e,width:"auto"})},makeImageAvailable:function(t){t.find("img:eq(0)").attr("src",t.data("bootstrap-waterfall-src"))},updatePosition:function(t,i){this.tops[t]+=i.outerHeight(!0)}};i.prototype.load=function(){var i=this;return this.$pins.each(function(){var n=new Image;n.src=t(this).data("bootstrap-waterfall-src");var s=new e(n);i.tasks.push(s),t(this).data("bootstrap-waterfall-pin",s)}),i.prototype.run=function(){return this.timerId=seTinterval(t.proxy(function(){this.isDone()?this.stop():this.check()},40),i.prototype.isDone=function(){return 0===this.tasks.length?!0:!1},i.prototype.stop=function(){ClearInterval(this.timerId),this.deferred.resolve()},i.prototype.check=function(){for(var t=0;t<this.tasks.length;t++){var i=this.tasks[t];i.isLoaded()&&this.tasks.splice(t--,1)}},e.prototype.isLoaded=function(){return this.img.width!==this.initialWidth||this.img.height!==this.initialHeight||this.img.width*this.img.height>1024?!0:!1};var a={getDocHeight:function(){var t=document;return Math.max(t.body.scrollHeight,t.documentElement.scrollHeight,t.body.offsetHeight,t.documentElement.offsetHeight,t.body.clientHeight,t.documentElement.clientHeight)},indexOf:function(t,i){if(null==t)return-1;for(var e=0,n=t.length;n>e;e++)if(t[e]===i)return e;return-1}},h=t.fn.waterfall;t.fn.waterfall=n,t.fn.waterfall.Constructor=o,t.fn.waterfall.noConflict=function(){return t.fn.waterfall=h,this}}(jQuery); // note waterfall should normally be linked as resource in your project $('#waterfall').data('bootstrap-waterfall-template',$('#waterfall-template').html()); let wf = $('#waterfall').waterfall(); let fader = { wh: $(window).height(),full: function() { $('#waterfall .pin').each(function(i,E) { (function(i,E) { setTimeout(function() { fader.check(E) },i * 150); })(i,E) }) },check: function(E) { if (fader.wh > e.getBoundingClientRect().top + 60) { $(E).addClass('inView'); setTimeout(function() { $(E).addClass('fix') },750) } },resize:function(){ fader.wh = $(window).height(); fader.full(); },light: function() { let fst = $('#waterfall .pin:not(".inView")').eq(0); if (fst.is('.pin')) { fader.check(fst[0]) } } }; setTimeout(function() { fader.full() },210); $(window) .on('scroll',fader.light) .on('resize',_.throttle(fader.resize,500,{leading:false,Trailing:truE}) );
#waterfall .pin { width: calc(50% - 4pX); opacity: 0; animation-duration: 0.75s; animation-fill-mode: both; } #waterfall .pin.inView { opacity: 1; animation-name: bounceInUp; } #waterfall .pin.inView.fix { animation: none; } #waterfall .pin a { display: block; padding: 4px 4px 8px; } * { Box-sizing: border-Box; } .container { text-align: center; } .container #waterfall { max-width: 800px; margin: 0 auto; } @keyframes bounceInUp { from,60%,75%,90%,to { animation-timing-function: cubic-bezier(0.215,0.61,0.355,1); } from { opacity: 0; transform: translate3d(0,3000px,0); } 60% { opacity: 1; transform: translate3d(0,-20px,0); } 75% { transform: translate3d(0,10px,0); } 90% { transform: translate3d(0,-5px,0); } to { transform: translate3d(0,0); } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script> <script id="waterfall-template" type="text/template"> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/1.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/2.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/3.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/4.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/5.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/6.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/7.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/8.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/9.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/10.png" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/11.png" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/12.png" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/2.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/6.jpg"> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/1.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/3.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/2.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/4.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/5.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/6.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/7.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/8.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/9.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/10.png" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/11.png" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/12.png" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/2.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/6.jpg"> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/1.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/2.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/3.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/4.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/5.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/6.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/7.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/8.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/9.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/10.png" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/11.png" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/12.png" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/2.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/6.jpg"> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/1.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/3.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/2.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/4.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/5.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/6.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/7.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/8.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/9.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/10.png" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/11.png" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/12.png" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/2.jpg" /> </a> </div> <div class="pin"> <a href="javascript:;"> <img src="https://tympanus.net/Development/GridLoadingEffects/images/6.jpg"> </a> </div> </script> <div class="container"> <div id="waterfall"></div> </div>
它的主要优点(以及我选择此路线的原因)是它们在滚动到视图之前对图像进行延迟加载,这意味着您不再需要按钮来加载更多内容.您可以将所有图像放在模板中< script>标签(阅读plugin docs – 滚动到Q& A – 看看它为什么建议添加这样的标记).@H_616_7@
我还从animate.css中挑出了BounceInUp动画,因此您无需加载它.@H_616_7@
注意CSS需要前缀,如果需要,fiddle还有SCSs.@H_616_7@
作为一般规则,我尽量保持它尽可能轻,特别是在javascript监听器方面(滚动时我只是在监听列表中下一个项目的位置,而不是全部).@H_616_7@
旨在作为概念证明,指向正确的方向.@H_616_7@
我知道我所做的并不完全是你所要求的(在某种意义上它不允许你在第一次计算后添加更多项目 – 不幸的是,Bootstrap Waterfall目前没有update()或addItems()方法而且我真的认为他们应该添加一个,而不重新计算现有的针脚 –
这已不再适用：Mystist,bootstrap-waterfall.js的作者已回应我的github request并添加了该方法.我现在通过添加一个添加更多按钮来更新jsfiddle,它按预期工作.从我这里向Mystist大拇指).当然,您可能需要根据项目的具体情况调整脚本,以及如何将新项目引入.在jsfiddle中,我选择创建一个生成新的< script>的函数.模板在运行中随机添加引脚.@H_616_7@
无论如何,这个布局遵循以下原则：@H_616_7@
>有一个绝对的定位方法来放置你的物品>加载时隐藏所有项目.使用您想要的效果将可见的动画显示为视图(交错).>锁定所有可见的,以取消调整大小时的任何动画效果(我使用了修复类).>在滚动条上放置一个监听器,检查下一个不可见的项目是否已进入视图.在动画结束时动画,并在动画结束后修复它.@H_616_7@
以上是大佬教程为你收集整理的jQuery：’加载更多’砖石元素？全部内容，希望文章能够帮你解决jQuery：’加载更多’砖石元素？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。