Question

我使用从CodePen中找到的以下代码...我在JS很糟糕，我希望有人可以帮助我。

如何制作，以便不重复这些项目，此刻，他们将永远滚动到20页面＆＃39;＆＃39;在无限滚动开始之前，我想要的是如果阵列中有50个图像，然后将这些图像显示20，然后停止。
我想把JS放在一个单独的文件中，然后使用PHP循环一些结果并输出图像，是否有可能以某种方式移动将图像渲染出javascript函数的div？所以我可以把它们放在html的块中？

这是我在HTML部分中的代码

<div id="SlideMiddle">
    <div id="grid">
        <div id="grid-content"></div>
    </div>
</div>

这是javascript

<script>
    var Imgs = [
        'https://tympanus.net/Development/GridLoadingEffects/images/1.jpg',
        'https://tympanus.net/Development/GridLoadingEffects/images/3.jpg',
        'https://d13yacurqjgara.cloudfront.net/users/64706/screenshots/1167254/attachments/152315/SUGARSKULL-01.png',
        'https://tympanus.net/Development/GridLoadingEffects/images/8.jpg',
        'https://tympanus.net/Development/GridLoadingEffects/images/10.png',
        'https://tympanus.net/Development/GridLoadingEffects/images/14.png',
        'https://tympanus.net/Development/GridLoadingEffects/images/9.jpg',
        'https://tympanus.net/Development/GridLoadingEffects/images/13.png',
        'https://tympanus.net/Development/GridLoadingEffects/images/12.png',
        'https://tympanus.net/Development/GridLoadingEffects/images/4.jpg',
        'http://www.thedrum.com/uploads/news/172673/DzrMPF_DeezerPoster_MusicSoundBetterWithYou_03.jpg'
    ];

    $(document).ready(function(){
        $grid = $('#grid-content');

        $.fn.revealItems = function($items){

            var iso = this.data('isotope');
            var itemSelector = iso.options.itemSelector;
            $items.hide();
            $(this).append($items);
            $items.imagesLoaded().progress(function(imgLoad, image){
                var $item = $(image.img).parents(itemSelector);
                $item.show();
                iso.appended($item);
            });

            return this;
        }
        $grid.isotope({
            containerStyle: null,
            masonry:{
                columnWidth: 300,
                gutter: 15
            },
            itemSelector: '.grid-item',
            filter : '*',
            transitionDuration: '0.4s'
        });


        $grid.imagesLoaded().progress(function(){
            $grid.isotope();
        })

        function GenerateItems(){
            var items = '';
            for(var i=0; i < 20; i++){
                items += '<div class="grid-item c'+(i%9)+' wow fadeInUp" ><a href=""><img src="'+Imgs[i%Imgs.length]+'" /></a></div>';
            }
            return $(items);
        }

        // SimpleInfiniteScroll
        function Infinite(e){
            if((e.type == 'scroll') || e.type == 'click'){
                var doc = document.documentElement;
                var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
                var bottom = top + $(window).height();
                var docBottom = $(document).height();

                if(bottom + 50 >= docBottom){
                    $grid.revealItems(GenerateItems());
                }
            }
        }

        $grid.revealItems(GenerateItems());

        $(window).resize(function(){
            var margin=40;
            var padding=15;
            var columns=0;
            var cWidth=300;
            var windowWidth = $(window).width();

            var overflow = false;
            while(!overflow){
                columns++;
                var WidthTheory = ((cWidth*columns)+((columns+1)*padding)+margin);
                if(WidthTheory > windowWidth)
                    overflow = true;
            }
            if(columns > 1)
                columns--;

            var GridWidth = ((cWidth*columns)+((columns+1)*padding)+margin);

            if( GridWidth != $('#grid').width()){
                $('#grid').width(GridWidth);
            }
        });
        $(window).scroll(Infinite);
        new WOW().init();

    })
</script>

Answer 1

对于第一个问题，我会改变GenerateItems程序

function GenerateItems(){
    var items = '';
    var limit = Imgs.length > 20 ? 20 : Imgs.length;
    for(var i=0; i < limit; i++){
        items += '<div class="grid-item c'+(i%9)+' wow fadeInUp" ><a href=""><img src="'+Imgs[i%Imgs.length]+'" /></a></div>';
    }
    return $(items);
}

但是你可以提供插件或Codepen以及带样式的示例吗？

如果我理解正确，你需要在那里输入选择器，你想要生成图像吗？

a）然后从JS文件中定义函数：

function infiniteList(selector){
    $grid = $(selector);

..... }

b）在index.html标题中附加JS文件

c）在index.html脚本部分的$（document）.ready中调用带有所需选择器的函数（在结束标记之前放置）。

var selector = ...//some calculation to get selector
$(document).ready(infiniteList(selector));

Answer 2

对于第一个问题，我认为你只想摆脱无限滚动。点击此处 - https://codepen.io/anon/pen/mqawpy 简单评论一下行号。 117你的笔。

//$(window).scroll(Infinite);

第二，您可以使用标签插入HTML内容，即＆＃34; ...＆＃34;使用PHP的HTML标记。点击这里 - How to write html code inside <?php ?>

Javascript循环遍历项目并将项目交换为HTML

2 个答案: