b523db2bbea7098aeccea0f78f41f223
     
     
     
    
    
    
    
    
    
    
 
تقنية و أشياء أخرى
تقنية و أشياء أخرى
مختلف المقالات و النقاشات و الروابط المتعلقة بالتقنية او المواضيع العامة
مشكلة فى إستخدم masonry.js
                         عربي     English

مشكلة فى إستخدم masonry.js
   محمد جمال الذياب        08-02-2020  
   khashabawy - عبدالله خشبة   
السلام عليكم ورحمة الله
بلجن masonry.js يستخدم لتوليد واجهات تحتوى على عناصر غير متساوية الإرتفاع
قمت بإدراجه فى مشروعى لأصمم به واجهة رئيسية و لكن للأسف واجهتنى مشكلة أنه يوجد فجوات بين العناصر مثلما هو موضح فى الصورة
هل من مساعده ؟
للعلم هذا هو الكود المستخدم :
 
<script src="http://localhost/test/assets/masonry/jquery.masonry.min.js"></script>
<script>
$('#masonry').masonry({
itemSelector: '.single_home_item',
columnWidth : 340,
isResizable:true,
isRTL:true,
containerStyle: { position: 'relative' },
gutterWidth:10,
isFitWidth:true
});
</script>

التعليقات
   خالد الحضري   
وعليكم السلام أخي عبد الله
ما دمت تستخدم مكتبة الـ JQuery فـ
 
$("document").ready( function() {
ضع الكود هنا
});


طبعا قمت مسبقا باستدعاء ملف الـ JQuery ؟
وسيعمل بإذن الله :)
 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<script>
$("document").ready( function() {
$('#masonry').masonry({
itemSelector: '.single_home_item',
columnWidth : 340,
isResizable:true,
isRTL:true,
containerStyle: { position: 'relative' },
gutterWidth:10,
isFitWidth:true
});
});
</script>
<style>
.single_home_item{
background: #f1f1f1;
border-bottom:5px solid #ddd;
padding:10px;
width: 300px;
margin: 10px;
float: right;
}
</style>
<div class="container" id="masonry">
<div class="single_home_item">*<br /><br /><br /><br />*</div>
<div class="single_home_item">*<br /><br />*</div>
<div class="single_home_item">*<br /><br /><br /><br />*</div>
<div class="single_home_item">*<br /><br />*</div>
<div class="single_home_item">*<br /><br /><br />*</div>
<div class="single_home_item">*<br /><br />*</div>
<div class="single_home_item">*<br />*</div>
<div class="single_home_item">*<br /><br /><br /><br />*</div>
<div class="single_home_item">*<br />*</div>
</div>

   khashabawy - عبدالله خشبة   
بالفعل هذا حل المشكلة , شكراً جزيلاً أخى خالد
   khashabawy - عبدالله خشبة   
CSS :
 
.single_home_item{
background: #f1f1f1;
border-bottom:5px solid #ddd;
padding:10px;
width: 320px;
margin: 10px;
float: right;
}


HTML :
 
<div class="container" id="masonry">
<div class="single_home_item">
<h1>عنصر من عناصر الصفحة الرئيسية</h1>
<h3> وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
</h3>
</div>

<div class="single_home_item">
<h1>عنصر من عناصر الصفحة الرئيسية</h1>
<h3> وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
</h3>
</div>
</div>

   khashabawy - عبدالله خشبة   
الصورة :
http://oi59.tinypic.com/2lszcb8.jpg
   Anasjber - أنس تمام   
لم أستطيع حل مشكلة الفجوات بواسطة إضافة masonry.js لذلك إستعنت بـ CSS لتلبية طلبك:
CSS
 
#masonry {
-moz-column-count:3;
text-align:right;
direction:rtl;
}
.single_home_item{
background: #f1f1f1;
border-bottom:5px solid #ddd;
padding:10px;
width: 320px;
margin: 10px;
display:inline-block;
}


HTML

 
<div class="single_home_item">
<h1>عنصر من عناصر الصفحة الرئيسية</h1>
<h3> وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
</h3>
</div>

<div class="single_home_item">
<h1>عنصر من عناصر الصفحة الرئيسية</h1>
<h3> وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
</h3>
</div>
<div class="single_home_item">
<h1>عنصر من عناصر الصفحة الرئيسية</h1>
<h3> وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
</h3>
</div>
<div class="single_home_item">
<h1>عنصر من عناصر الصفحة الرئيسية</h1>
<h3> وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
</h3>
</div>
<div class="single_home_item">
<h1>عنصر من عناصر الصفحة الرئيسية</h1>
<h3> وصف عنصر من عناصر الصفحة الرئيسية
عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
</h3>
</div>
<div class="single_home_item">
<h1>عنصر من عناصر الصفحة الرئيسية</h1>
<h3> وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
</h3>
</div>
<div class="single_home_item">
<h1>عنصر من عناصر الصفحة الرئيسية</h1>
<h3> وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة
</h3>
</div>
<div class="single_home_item">
<h1>عنصر من عناصر الصفحة الرئيسية</h1>
<h3> وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
</h3>
</div>


http://i.imgur.com/YHo97y3.png
   khashabawy - عبدالله خشبة   
ولكن ذلك عن طريق إستخدام inline block و ليس float
و هو مالا يجدى فى حالة عمل تحميل المزيد عبر ajax
   Anasjber - أنس تمام   
اها، للأسف خبرتي بالجافاسكربت والاجاكس ضعيفه :(.
لكن ربما تكون المشكلة هنا:
http://i.imgur.com/sRyGdD8.png
  الموضوع و التعليقات و باقي البيانات في هذه الصفحة منقولة و معدلة من المصدر على الرابط التالي : https://io.hsoub.com/webdev/7155
  هذا الموضوع مرخص تحت : رخصة المشاع الإبداعي BY-SA
المشاركة :
تويتر
فيسبوك
الإيميل
لينكد إن
واتساب
الرابط

السر في الإستيقاظ باكرا السر في الإستيقاظ باكرا
رأيي الشخصي كمستخدم جديد لمنصة حسوب I/O وأتمنى أن يصل للإدارة رأيي الشخصي كمستخدم جديد لمنصة حسوب I/O وأتمنى أن يصل للإدارة
من اين ابدأ في تعلم الالكترونيات من اين ابدأ في تعلم الالكترونيات
26 - سلسلة تبسيط البرمجة – برنامج الحلقة المحدودة For 26 - سلسلة تبسيط البرمجة – برنامج الحلقة المحدودة For
مشروع تصميم و تطوير أول جهاز للألعاب في العالم العربي مشروع تصميم و تطوير أول جهاز للألعاب في العالم العربي
اكثر ما أعجبني هنا <3 اكثر ما أعجبني هنا <3
أصبحت أعيش في أحلام اليقظة فقط دون العمل نحو هدفي! أصبحت أعيش في أحلام اليقظة فقط دون العمل نحو هدفي!

gg gg
مراجعات - تقييمات - فديوها - مقالات و مختلف المواضيع التي تهم اللاعبين العرب
http://gg.leomara.com/
الروابط المختصرة    سياسة الخصوصية    شروط الإستخدام    من أنا    من نحن    الأسئلة الشائعة    موضوع عشوائي    اتصل بنا   
                           
Developed by : MJ7.org