Question

我的页面上有一些元素，我一次只能加载5个元素。

我需要做的是使用animate.css为加载的元素设置动画。

为了解释这一点，我创造了这个小提琴：

向下滚动以查看“显示更多”按钮并点击它以查看其实际效果。

当我加载更多项目时，元素是动画的，但因为它们是在Masonry style中布局的，所以它们的位置不断变化，这不是我想要的。基本上我需要将元素保持在第一个位置并继续添加/加载更多元素。

如果您注释掉以下CSS代码并运行JSFIDDLE，您将看到元素的布局有多好，这也是我希望它们在一次加载5时的样子：

#grid li:nth-child(n+6) {
  /*display: none;*/
}

我需要做的是使用animate.css将元素反弹。

这是我的完整代码：

$('#sales').click(function() {
$('#grid li').not(':visible').slice(0, 5).slideDown();

$('#grid li').not(':visible').slice(0, 5).addClass('animated bounceInUp');
});

注意：我不想使用任何插件，例如this

主要是因为它对我的项目来说非常庞大和臃肿，而且在我的项目中它也不能正常运行。

有人可以就此问题提出建议吗？

修改

这是另一个失败的尝试：

https://jsfiddle.net/89v781rL/8/

还有这个：

https://jsfiddle.net/89v781rL/9/

Answer 1

TL; DR： Proposed solution。

简单地说，你想要的是不可能的。至少不是你如何开始它。

但是，事情就是这样：我进入编码的原因（来自设计背景 - 以及我回答你问题的主要原因）是因为一群网络开发人员告诉我有关我制作的特定设计，它不可能。所以我（重新）进行了搜索和实验，直到我找到了方法。

从那以后，每当我得出这个结论时，我总是把它翻译成：
这是可能的，我只是做错了 。

在您的特定情况下，您使用的是 ＆＃34;砌砖＆＃34; 技术 < / em>的。它是一种名为CSS columns的列布局技术。从技术角度来看，这就是它的作用：

计算列的宽度，考虑父总宽度，列数和列装订线

根据生成的列宽
计算内容的总高度
将内容分成适合列的块，尝试平等分配内容，尊重任何break-inside声明。请注意属性值的暗示名称：avoid，它不是forbid或disallow。根据内容，此规则并不总是适用。

但是，简而言之，这里是您的2列布局最初呈现的方式：

1 4 2 5 3 6

当您决定添加更多内容时，考虑到更新的内容高度，它将再次执行上述步骤：

1 5 2 6 3 7 4

它将计算可能的破坏选项，并将用于导致父元素的最小高度的选项。如果两个或多个结果具有相同的高度，则大多数浏览器将选择使后一个/最后一个列更短的浏览器。

如果您的内容需要在呈现后保留，CSS Columns技术显然不是一种选择。因此，您正在研究使用绝对定位的技术。你有很多选择，但值得注意的是（我可能是主观的 - 但是有人真正客观吗？）是：

Masonry。它附带了非常方便的stamp方法，专门针对您的要求而设计（将现有元素固定到位，因此添加更多内容不会重新定位现有元素 - 这可能偶尔会发生，具体取决于内容和父级 - 例如，如果你有一个现有的短项目列表，并且你添加了一个非常高的项目，它将导致一个比其他项目更高的列;如果没有在现有项目上调用标记，它们将被重新定位，以便结果列的高度差异很小）

Isotope - 我从来没有机会使用它，但我听到了很多好消息。

所谓的 pinterest布局脚本 。它是由Evan Sharp编写的，它完全依赖于javascript和绝对定位（就像砌体一样），但却非常有效。他解释了他是如何做到的in this SO answer而且这里有good tutorial这个技术。如果你不太关心技术部分并且只对果汁感兴趣，我发现了一个名为Bootstrap Waterfall的轻量级插件，除了上面列出的所有内容之外，还有一个生产就绪的可用版本。

到目前为止我写的所有东西都是一点点时间和正确的 search-fu 会让你得到的。

剩下的唯一步骤（以及真正的答案）是使用所需的animate.css效果将每个项目动画化为视图。我为布局选择了Bootstrap-waterfall，但您也可以使用其他任何选项。这是：

＆＃13;
＆＃13;
// Included waterfall script as it doesn't load from github for everyone +function(t){"use strict";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&&"string"!=typeof i&&n.destroy()&&(n=null),n||e.data("mystist.waterfall",n=new o(this,s)),"string"==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(),a=null,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,r=t.apply(n,o),a||(n=o=null)):a||e.trailing===!1||(a=setTimeout(l,c)),r}},debounce:function(t,i,e){var n,o,r,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,o),n||(r=o=null)))};return function(){r=this,o=arguments,a=s.now();var u=e&&!n;return n||(n=setTimeout(l,i)),u&&(h=t.apply(r,o),r=o=null),h}}},o=function(i,e){this.$element=t(i),this.options=t.extend({},o.DEFAULTS,e),this.id=Math.random().toString().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,this},o.prototype.initAttributes=function(){return this.$fakePin=this.$pins.first().clone(),this.$container=t("<div />").css("position","relative"),this.$element.html(this.$container),this},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(),this},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,this},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)),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())},this),500)),this},o.prototype.render=function(i){var e=this;return i.each(function(){e.placePin(t(this))}),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),t.removeData("bootstrap-waterfall-src")),this.$container.append(t),r.updatePosition.call(this,i,t),this},o.prototype.updateHeight=function(){var t=a.indexOf(this.tops,Math.max.apply(null,this.tops));return this.$container.height(this.tops[t]),this},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,10),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)}),this},i.prototype.run=function(){return this.timerId=setInterval(t.proxy(function(){this.isDone()?this.stop():this.check()},this),40),this},i.prototype.isDone=function(){return 0===this.tasks.length?!0:!1},i.prototype.stop=function(){clearInterval(this.timerId),this.timerId=null,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}) );
＆＃13;
#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, 0); } }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

它的主要优点（以及我选择此路线的原因）是它们在滚动到视图之前对图像进行延迟加载，这意味着您不再需要按钮来加载更多。您可以将所有图片放在模板<script>标记中（阅读plugin docs - 滚动到 Q＆amp; A - 看看为什么建议添加这样的标记）。

我还从BounceInUp中挑选了animate.css动画，因此您无需加载它。

请注意CSS需要添加前缀，如果需要，fiddle还需要SCSS。

作为一般规则，我尽量保持尽可能轻松，特别是在javascript听众方面（scroll我只是在听取下一个项目的位置列表，而不是所有人。）

作为概念证明，指向正确的方向。

我知道我所做的并不完全是你提出的问题（从某种意义上说，它不允许你在第一次计算后添加更多项目 - 不幸的是，Bootstrap瀑布目前还没有{ {1}}或update()方法，我认为他们应该添加一个，而不重新计算现有的引脚 -
这已不再适用：addItems()，bootstrap-waterfall.js的作者已回复我的Mystist并添加了该方法。我现在通过添加一个添加更多按钮来更新jsFiddle，它按预期工作。从我这里向Mystist大拇指）。当然，您可能需要根据项目的具体情况调整脚本，以及如何将新项目引入。在jsFiddle中，我选择创建一个生成新{{1动态模板，随机添加引脚。

无论如何，这个布局遵循以下原则：

有放置物品的绝对定位方法

加载时隐藏所有项目。使用您想要的效果将可见的动画显示为视图（交错）。

锁定所有可见的，以取消调整大小时的任何动画效果（我使用<script>类）。

在fix上放置一个监听器，并检查下一个不可见的项目是否已进入视图。动画时动画，动画结束后scroll动画。

Answer 2

我认为你不能使用列数css来实现这种效果，因为它计算列的方式。设置'display：none;'时在一个项目上，列中项目的位置就像它不存在一样。似乎列也考虑了元素的高度。

我的建议是你可以改变你的方法，而是使用你自己的包装列和你自己的javascript / jquery吗？

无论如何看着这个问题并四处寻找我发现你的问题在这里似乎是重复的，这里是答案（与我的相似结论，但也有一个聪明的解决方法）：CSS column-count elements jumping across columns

jQuery：＆＃39;加载更多＆＃39;砌体元素？

2 个答案: