आइटम्स पर जावास्क्रिप्ट लूपिंग और एचटीएमएल

Question

में आइटम को स्वैप करना मैं कोडपैन से प्राप्त निम्न कोड का उपयोग कर रहा हूं ... मैं जेएस पर भयानक हूं और मैं उम्मीद कर रहा था कि कोई मेरी मदद कर सके।

1. मैं यह इतना आइटम दोहराने नहीं है, पल में, वे हमेशा के लिए 20 के साथ में अनंत स्क्रॉल किक से पहले एक 'पेज' के लिए स्क्रॉल कैसे कर सकता हूँ, मैं क्या चाहते हैं, अगर वहाँ 50 छवियों है सरणी में, फिर उन छवियों को प्रदर्शित करें, 20 पृष्ठ पर और फिर रोकें।
2. मैं जेएस को एक अलग फ़ाइल में रखना चाहता हूं और फिर कुछ परिणामों पर PHP को लूप का उपयोग करना चाहता हूं और छवियों को आउटपुट करना चाहता हूं, क्या किसी भी तरह से जावा को जावास्क्रिप्ट फ़ंक्शन से बाहर प्रस्तुत करने वाले div को स्थानांतरित करना संभव है? ताकि मैं उन्हें वास्तव में एचटीएमएल में ब्लॉक में डाल सकूं?

इस कोड मैं एचटीएमएल भाग

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

में है और इस जावास्क्रिप्ट

<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

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); 
   } 
   

लेकिन क्या आप स्टाइलिंग plz के साथ उदाहरण के साथ plunter या codepen प्रदान कर सकते हैं?

2. यदि मैं सही ढंग से समझता हूं तो आपको चयनकर्ता को खिलाने की आवश्यकता है, जहां आप छवियां उत्पन्न करना चाहते हैं?

क) जे एस फ़ाइल से तो बस परिभाषित समारोह:

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

..... }

ख) index.html हैडर

ग में जे एस फ़ाइल संलग्न) $ (दस्तावेज़) में आवश्यक चयनकर्ता के साथ कॉल फ़ंक्शन। index.html स्क्रिप्ट अनुभाग में पहले से ही (इसे टैग बंद करने से पहले रखें)।

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

Answer 2

छवियाँ

दोहरा छवि दोहरा व्यवहार के लिए योगदान दे दो बातें कर रहे हैं। सबसे पहले, जैसा कि किसी अन्य उत्तर में बताया गया है, लूप काउंटर 20 तक हार्ड कोड किया गया है। इसलिए यदि आप पांच छवियों में गुजरते हैं, तो प्रत्येक चार बार दोहराएगा। Imgs सरणी की लंबाई में 20 को बदलना इससे रोका जाएगा।

दूसरा, GenerateItems() फ़ंक्शन हमेशा परिणाम देता है।

अगर वहाँ सरणी में 50 छवियों है, तो उन छवियों, 20 एक पृष्ठ पर प्रदर्शित करने और फिर बंद

इसका मतलब है कि GenerateItems() एक खाली सेट वापस जाने के लिए की आवश्यकता होगी (या नहीं कहा जा) सभी 50 छवियों को प्रदर्शित करने के बाद। एक बेवकूफ दृष्टिकोण में वैश्विक पृष्ठ गिनती चर शामिल हो सकता है।

var pagesServed = 0; 

$(document).ready(function(){ 
    $grid = $('#grid-content'); 
..... 
function GenerateItems(){ 
    console.log("generating items"); 
    var items = ''; 
    if (++pagesServed > 2) { 
     return items; 
    } 
    for(var i=0; i < Imgs.length; i++){ 
     .... 

प्रतिपादन

एक वास्तविक जीवन उपयोग मामले में सर्वर साइड, तो आप शायद की इस सूची में ला रहे हैं: In this codepen, मैं इतना की तरह, पृष्ठों की संख्या सीमित करने के लिए इस तरह के एक चर जोड़े आपके सर्वर से छवि लिंक, जो आपके प्रश्न के दूसरे भाग में संबंध रखता है।

आप इन divs को आसानी से सर्वर पक्ष पर प्रस्तुत कर सकते हैं। GenerateItems() फ़ंक्शन जावास्क्रिप्ट में उन्हें बनाने के बजाय, divs प्राप्त करने के लिए आपके बैक एंड पर AJAX कॉल करेगा।

<?php 
require_once __DIR__.'/vendor/autoload.php'; 

session_start(); 

$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' 
]; 

$items = ''; 

for ($i=0; $i < 20; $i++){ 
    $items .= '<div class="grid-item c' . ($i % 9) . ' wow fadeInUp" ><a href=""><img src="' . $Imgs[$i % count($Imgs)] . '" /></a></div>'; 
} 
header('Access-Control-Allow-Origin: *'); 
printf($items); 

फिर GenerateItems() इस तरह मोटे तौर पर दिखेगा::

function GenerateItems(){ 
     console.log("generating items"); 
     var fetched = fetch('http://localhost:8000').then(function(data) { 
      return data.text(); 
     }); 

     return fetched; 
    } 

और revealItems वादा से निपटने के लिए संशोधित किया गया है:

$.fn.revealItems = function($items){ 
    var self = this; 
    var iso = this.data('isotope'); 
    var itemSelector = iso.options.itemSelector; 
    $items.then(function($fetcheditems) { 
     console.log($fetcheditems); 
     $($fetcheditems).hide(); 
     $(self).append($fetcheditems); 
     $($fetcheditems).imagesLoaded().progress(function(imgLoad, image){ 
      var $item = $(image.img).parents(itemSelector); 
      $item.show(); 
      iso.appended($item); 
     }); 
    }); 
    return this; 
} 

मैं डाल यही कारण है कि PHP कोड कुछ इस तरह लग सकता है एक उदाहरण जो इन divs को सर्वर पक्ष on GitHub पर प्रस्तुत करता है। अस्वीकरण - यह एक न्यूनतम उदाहरण है - मुझे काम करने के लिए WOW स्टाइल प्राप्त करने से परेशान नहीं था, और सीओआरएस समर्थन न्यूनतम है (उदाहरण के लिए Access-Control-Allow-Credentials हेडर सेट है)।

प्रत्येक कॉल पर कौन सी छवियां वापस लौटने का निर्णय लेने के लिए आपको अपना स्वयं का सर्वर साइड लॉजिक लागू करना होगा। उदाहरण के लिए, आप ट्रैक का उपयोग कर सकते हैं कि कौन से पहले से ही सेवा कर चुके हैं, या आप क्वेरी स्ट्रिंग पैरामीटर स्वीकार कर सकते हैं जो अनुरोध की जा रही छवियों की सीमा को परिभाषित करते हैं।

Answer 3

पहले प्रश्न के लिए मुझे लगता है कि आप केवल अनंत स्क्रॉल से छुटकारा पाना चाहते हैं। यहां जांचें- https://codepen.io/anon/pen/mqawpy बस टिप्पणी पंक्ति संख्या। आपकी कलम का 117

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

और दूसरा के लिए, आप HTML सामग्री अर्थात PHP का उपयोग HTML के "..." टैग सम्मिलित करना टैग का उपयोग कर सकते हैं। यहां जांचें- How to write html code inside <?php ?>