0xV3NOMx
Linux ip-172-26-7-228 5.4.0-1103-aws #111~18.04.1-Ubuntu SMP Tue May 23 20:04:10 UTC 2023 x86_64



Your IP : 3.12.151.11


Current Path : /var/www/html/gcg/adm/admin/plugins/masonry/
Upload File :
Current File : /var/www/html/gcg/adm/admin/plugins/masonry/index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery mp-mansory.js Plugin Example</title>
	<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
	<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="src/mp.mansory.js"></script>
	<link rel="stylesheet" type="text/css" href="src/style.css">
</head>
<body>
<div id="jquery-script-menu">
<div class="jquery-script-center">
<ul>
<li><a href="http://www.jqueryscript.net/layout/Responsive-Masonry-style-Gallery-Plugin-With-jQuery-Bootstrap-mp-mansory-js.html">Download This Plugin</a></li>
<li><a href="http://www.jqueryscript.net/">Back To jQueryScript.Net</a></li>
</ul>
<div class="jquery-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div class="jquery-script-clear"></div>
</div>
</div>
	<div class="container">
		<h1>mp-mansory.js Example</h1>
		<div class="" id="my-gallery-container">
			<div class="item" data-order="31">
				<p>item 0</p>
			</div>
			<div class="item h200" data-order="30">
				<p>item 1</p>
			</div>
			<div class="item h250" data-order="29">
				<p>item 2</p>
			</div>
			<div class="item h150" data-order="28">
				<p>item 3</p>
			</div>
			<div class="item h100" data-order="27">
				<p>item 4</p>
			</div>
			<div class="item" data-order="26">
				<p>item 5</p>
			</div>
			<div class="item h200" data-order="25">
				<p>item 6</p>
			</div>
			<div class="item h150" data-order="24">
				<p>item 7</p>
			</div>
			<div class="item h100" data-order="23">
				<p>item 8</p>
			</div>
			<div class="item" data-order="22">
				<p>item 9</p>
			</div>
			<div class="item h200" data-order="21">
				<p>item 10</p>
			</div>
			<div class="item h150" data-order="20">
				<p>item 11</p>
			</div>
			<div class="item h100" data-order="19">
				<p>item 12</p>
			</div>
			<div class="item" data-order="18">
				<p>item 13</p>
			</div>
			<div class="item h200" data-order="17">
				<p>item 14</p>
			</div>
			<div class="item h150" data-order="16">
				<p>item 15</p>
			</div>
			<div class="item h150" data-order="15">
				<p>item 16</p>
			</div>
			<div class="item h100" data-order="14">
				<p>item 17</p>
			</div>
			<div class="item" data-order="13">
				<p>item 18</p>
			</div>
			<div class="item h200" data-order="12">
				<p>item 19</p>
			</div>
			<div class="item h250" data-order="11">
				<p>item 20</p>
			</div>
			<div class="item h200" data-order="10">
				<p>item 21</p>
			</div>
			<div class="item h200" data-order="9">
				<p>item 22</p>
			</div>
			<div class="item" data-order="8">
				<p>item 23</p>
			</div>
			<div class="item h150" data-order="7">
				<p>item 24</p>
			</div>
			<div class="item h100" data-order="6">
				<p>item 25</p>
			</div>
			<div class="item" data-order="5">
				<p>item 26</p>
			</div>
			<div class="item h200" data-order="4">
				<p>item 27</p>
			</div>
			<div class="item h150" data-order="3">
				<p>item 28</p>
			</div>
			<div class="item" data-order="2">
				<p>item 29</p>
			</div>
			<div class="item h150" data-order="1">
				<p>item 30</p>
			</div>
			<div class="item" data-order="0">
				<p>item 31</p>
			</div>

		</div>


	</div>
	<script type="text/javascript">
		jQuery(document).ready(function ( $ ) {
			$("#my-gallery-container").mpmansory(
				{
					childrenClass: 'item', // default is a div
					columnClasses: 'padding', //add classes to items
					breakpoints:{
						lg: 3, 
						md: 4, 
						sm: 6,
						xs: 12
					},
					distributeBy: { order: false, height: false, attr: 'data-order', attrOrder: 'asc' }, //default distribute by order, options => order: true/false, height: true/false, attr => 'data-order', attrOrder=> 'asc'/'desc'
					onload: function (items) {
						//make somthing with items
					} 
				}
			);
		});
	</script><script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body>
</html>