ثلاثة أمثلة على تحقيق تدفق المياه باستخدام jQuery

الشلال المتدفقهذه هي الأمثلة الشائعة، حيث يتم شرح كيفية تحقيق وظيفة تدفق النهر باستخدام طريقة jQuery!

مقدمة: نرى الكثير من وظائف تدفق النهر في العديد من المواقع مثل Taobao، JD وغيرها من المنتجات...

لتحقيق ذلك، يجب علينا النظر في بعض الأسئلة أولاً:1- الحصول على البيانات 2- طريقة الترتيب 3- كيفية تحقيق الترتيب

في الواقع، هناك وظيفة رئيسية في تدفق النهر هي استخدام تحديد إيجابي!

نحن نتحلل تدريجيًا:

هذا هو تصميم html، يمكنك ضبط تصميم css بنفسك، فقط تأكد من أن grid box لديه تحديد إيجابي، وإذا كان لديه تحديد نسبي للعنصر الأم!

إليكم جزء script:

يمكن لهذا النوع استخدام دورة for للحصول على أرقام المؤشرات للصور بشكل متسلسل، ثم تغيير القيم الخاصة بـ top و left في سمة css!

عند الحصول على موارد الصور، قد تكون أبعاد الصور غير متساوية، إذا كانت مرتبة بشكل متسلسل، فإن عرض الصور في النهاية قد يكون غير منظم، مما يؤدي إلى تأثير سيء!

تابعوا القراءة:

يمكننا استخدام طريقة أخرى لتحقيق هذا الحل، وهي إدراج الصور في الأعمدة الأقصر في الوقت الحالي!

دعونا ننظر في كود jQuery الرئيسي الآن:

حسنًا، الآن وقد حللنا مسألة تدفق النهر بطرقين، ولكن لا يزال لدينا مشكلة لم تحل بعد، وهي أن السبب الرئيسي في أن تدفق النهر كبير جدًا هو كمية الصور الكبيرة، هل يكون كتابة html لكل صورة أمرًا منخفض المستوى؟!

تابعوا القراءة:

سأشرح لكم الآن كيفية استخدام نموذج المحرك لاستخراج البيانات من الخلفية json لتحقيق هذا المسألة!

1- نحتاج فقط إلى بناء صندوق html!

2- تم بناء الصندوق، يجب الحصول على البيانات، يعتمد عليها!

3- هذه مكتبات js، يمكنك تنزيلها من الإنترنت!

4- إليكم الجزء المحدد من js، تحتاج إلى تحليله بعناية!

يحتوي بشكل رئيسي على، استدعاء محتوى النمذجة من محرك البحث، وتنسيق الدالة، وتحويلها إلى كائن jQuery!

يحتوي هذا الجزء بشكل رئيسي على: طلب البيانات من json عبر ajax!

يحتوي هذا الجزء بشكل رئيسي على: وظيفة الدورة، للبحث عن ترتيب الأعمدة الأقصر!

وهذه بعضها أيضًا، وهي الجزء الرابع:

الخطوة الأخيرة هي: وظيفة التدول، يُنصح باستخدام console.log في الخلفية للتحقق منها، لأنها أسهل لفهمها!

بالرغم من أن الطريقة الأخيرة معقدة، ولكن بمجرد اكتمالها يمكننا استخدامها عدة مرات وتحصل على الكثير من البيانات تلقائيًا!

سأقدم لكم النص الأصلي الآن، من فضلكم اختباروه جيدًا ولا تنسوا تغيير الصور والpaths!　

طريقة الأولى الأصلية:　

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>Document</title>
 <style type="text/css">
  *{
   margin: 0;
   padding: 0;
  }
  body{
   background-color: #ccc;
  }
  .waterfall{
   width: 790px;
   /*height: 1000px;*/
   /*border: 1px solid red;*/
   margin: 0 auto;
   position: relative;
  }
  .grid{
   position: absolute;
   width: 230px;
   background-color: white;
   padding: 10px;
   border-radius: 15px;
  }
  .grid img{
   width: 230px;
  }
 </style>
</head>
<body>
 
  <div class="grid">
   
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </div>
  <div class="grid">
   
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </div>
  <div class="grid">
   
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </div>
  <div class="grid">
   
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </div>
  <div class="grid">
   
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </div>
  <div class="grid">
   
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </div>
  <div class="grid">
   
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </div>
  <div class="grid">
   
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </div>
  <div class="grid">
   
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </div>
  <div class="grid">
   
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </div>
  <div class="grid">
   
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </div>
  <div class="grid">
   
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </div>
  <div class="grid">
   
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </div>
 </div>
 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
 <script type="text/javascript">
  window.onload = function(){};
   //الحصول على جميع grid
   $grids = $(".grid");
   //
   $grids.each(function(){});
    var sum = 0;
    //المرور على إجمالي الارتفاع للأشخاص فوقه
    للدورة على (i = $(this).index() - 3 ; i >= 0 ; i-=3){
     sum += $grids.eq(i).outerHeight() + 20;
    }
    console.log($(this).index());
    $(this).css({
     "top" : sum,
     "left" : ($(this).index() % 3) * 270
    });
   });
   }
 </script>
</body>
</html>

第二种方法原码：　

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>Document</title>
 <style type="text/css">
  *{
   margin: 0;
   padding: 0;
  }
  body{
   background-color: #ccc;
  }
  .waterfall{
   width: 790px;
   margin: 0 auto;
   position: relative;
  }
  .grid{
   position: absolute;
   width: 230px;
   background-color: white;
   padding: 10px;
   border-radius: 15px;
  }
  .grid img{
   width: 230px;
  }
 </style>
</head>
<body>
 瀑布流的算法2，看哪个列最矮，插入在哪个列
 
  <div class="grid">
   
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </div>
  <div class="grid">
   
   内容内容内容内容内容内容内内容内容内容内内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容
  </div>
  <div class="grid">
   
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </div>
  <div class="grid">
   
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </div>
  <div class="grid">
   
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </div>
  <div class="grid">
   
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </div>
  <div class="grid">
   
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </div>
  <div class="grid">
   
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </div>
  <div class="grid">
   
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </div>
  <div class="grid">
   
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </div>
  <div class="grid">
   
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </div>
  <div class="grid">
   
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </div>
  <div class="grid">
   
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </div>
 </div>
 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
 <script type="text/javascript" src="js/underscore.js"></script>
 <script type="text/javascript">
  window.onload = function(){};
   //ليس كل صفيحة تتضمن نفس ترتيبها في العمود %3، ابحث عن العمود الأصغر وأضفها هناك=
   //الحصول على جميع grid
   $grids = $(".grid");  
    //استخدم مجموعة لتخزين إجمالي ارتفاع الثلاثة أعمدة الحالية
    var colHeight = [0,0,0]; 
    // console.log(colHeight);
    //استكشاف الصفائح الصغيرة
    $grids.each(function(){});
     //ابحث عن أقصر عمود حالي
     var minValue = _.min(colHeight); //أقل قيمة في colHeight!
     //أنظر إلى موقع أقصر عمود في index
     var minIndex = _.indexOf(colHeight,minValue);//أدنى القيم وأسفلها
    // console.log(minIndex);
     $(this).css({
      "top" : minValue ,
      "left" : minIndex * 270
     });
     colHeight[minIndex] += $(this).outerHeight() + 20;
     // console.log(colHeight[minIndex]);
    });
   }
 </script>
</body>
</html>

الطريقة الثالثة الأصلية:　

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>Document</title>
 <style type="text/css">
  *{
   margin: 0;
   padding: 0;
  }
  body{
   background-color: #ccc;
  }
  .waterfall{
   width: 790px;
   margin: 0 auto;
   position: relative;
  }
  .grid{
   position: absolute;
   width: 230px;
   background-color: white;
   padding: 10px;
   border-radius: 15px;
  }
  .grid img{
   width: 230px;
  }
  .grid .title{
   font-weight: bold;
   font-size: 18px;
   line-height: 32px;
  }
  .grid .neirong{
   line-height: 150%;
   font-size: 14px;
   margin-bottom: 20px;
  }
  .grid .zuozhe{
   float: right;
   color:orange;
   font-size: 12px;
  }
  .loading{
   margin: 0 auto;
   width: 400px;
   line-height: 30px;
   text-align: center;
   font-size: 14px;
   background-color: gold;
   color:white;
  }
 </style>
</head>
<body>
 <div class="waterfall" id="waterfall">
 </div>
 <div class="loading">
  جار التحميل...
 </div>
 <script type="text/template" id="grid_template">
  <div class="grid">
   <img src="<%=imgurl%>" alt="" />
   <p class="title"><%=title%></p>
   <p class="neirong"><%=content%></p>
   <p class="zuozhe"><%=author%></p>
  </div>
 </script>
 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
 <script type="text/javascript" src="js/underscore.js"></script>
 <script type="text/javascript">
 // define variables and objects
  // get the content from the engine template, convert it to a string using jQuery
  var templateString = $("#grid_template").html();
  // binds the converted string to the compileFunction function!
  var compileFunction = _.template(templateString);//_.template() يرجع إلى دالة!
  // console.log(typeof(compileFunction)); //function
  //تحويل إلى كائن jQuery، من أجل استخدام طرق jQuery لاحقاً
  var $waterfall = $("#waterfall");
  var $loading = $(".loading");
  //ثلاثة أعمدة تيار متدفق، مجموع الارتفاع لكل عمود
  var colHeight = [0,0,0];
  // هذا هو عدد الارتفاعات الثلاثة، لا علاقة له بالقيم الموجودة فيها، يُمثل الترتيب الخاص بـ index!
  // console.log(colHeight);
 // الحصول على البيانات
  // عامل التبادل
  var page = 1;
  getJSONandRender(page);
  function getJSONandRender(page){
   // لتحسين تجربة المستخدم
   $loading.show();
   // إرسال طلب AJAX
   $.get("json/json" + page + ".txt",function(data){ // إصدار سلسلة النص 
    // تحويل إلى كائن
    var dataObj = eval("(" + data + ")");  // تحويل البيانات AJAX إلى كائن!
    // لا يوجد بيانات أكثر
    // dataObj.news.length يأتي من json الخلفي
    if(dataObj.news.length == 0){
     $loading.show().html("لا يوجد المزيد");
     return; // يتم إنهاء lock هنا أيضًا!
    }
 // يتم تنفيذ الدالة، والحصول على قيمة الترتيب بناءً على موقع التثبيت المطلق!
    _each(dataObj.news,function(dictionary){ // يتم تنفيذ الدالة مرة واحدة لكل مرور!     
     // هذا هو بناء النظام المدمج
     var image = new Image(); // تخصيص مساحة ذاكرة للاعتماد على الكائن!
     // يتم تنفيذ أي كود يحتويه بناءً على استدعاء الكائن!
     image.src = dictionary.imgurl;
     // الآن نقوم بتحويل image إلى جائزة jQuery ثم نقوم بتحديد الحدث
     $(image).load(function(){
      // console.log(dictionary.imgurl + "تم التحميل");      
      var domString = compileFunction(dictionary);
      // console.log(typeof(domString));
      var $grid = $(domString);
      $waterfall.append($grid);
      // يتم تعيين left و top بناءً على خوارزمية النهر المتدفق
      // القيمة الأدنى
      minValue = _.min(colHeight);
      // الموقع الأدنى للقيمة!
      minIndex = _.indexOf(colHeight,minValue);
      $grid.css({}}
       "top" : minValue
       "left" : minIndex * 270
      });
      //تغيير قيمة مجموع عالية العمود
      colHeight[minIndex] += $grid.outerHeight() + 10;
      //جعل الصندوق الكبير يتناسب مع أعلى عمود
      $waterfall.css("height",_.max(colHeight));
      //إخفاء نص التحميل
      $loading.hide();
     });
    });
    lock = true;
   });
  }
  var lock = true;
  //مراقبة التمرير
  $(window).scroll(function(){
   if(!lock) return;
   var rate = $(window).scrollTop() / ($(document).height() - $(window).height());
   if(rate >= 0.7){
    page ++;
    getJSONandRender(page);
    lock = false;
   }
  });
 </script>
</body>
</html>

هذا هو نهاية محتويات هذا المقال، نأمل أن تكون قد ساعدتكم في التعلم، ونأمل أن تدعموا تعليماتي.

البيان: محتويات هذا المقال تم جمعها من الإنترنت، وتنتمي إلى مالك الأصلي، تم جمع المحتويات من قبل المستخدمين عبر الإنترنت بطرقهم الخاصة، ولا يمتلك هذا الموقع حقوق الملكية، ولا يتم تعديل المحتويات بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية متعلقة بذلك. إذا كنت قد وجدت محتوى يشتبه في انتهاك حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # ب @) لإبلاغنا، وقدم الدليل على ذلك، وسيتم حذف المحتوى المزعوم فور التحقق منه.

تعليمية الأساس

أنت قد تحب