小编Ham*_*ter的帖子

.box {
	position: relative;
	margin: .75em auto 0;
	max-width: 255px;
	min-height: 56px;
}

svg {
	position: absolute;
	width: 100%; height: 100%;
}

<div class='box'>
	<svg>
		<mask id='m' fill='#fff'>
			<rect id='r' width='256' height='56'/>
			<circle id='c' r='10' fill='#000'/>
			<use xlink:href='#c' x='100%'/>
			<use xlink:href='#c' y='100%'/>
			<use xlink:href='#c' x='100%' y='100%'/>
		</mask>
		
		<mask id='m2' fill='#fff'>
			<rect id='r2' width='248' height='50' x="4" y="4" />
			<circle id='c2' r='14' fill='#000' stroke='#000'/>
			<use xlink:href='#c2' x='100%' />
			<use xlink:href='#c2' y='100%'/>
			<use xlink:href='#c2' x='100%' y='100%'/>
		</mask>
		
		<use xlink:href='#r' …

$(window).on('load', function(){

    function gridMasonry(){
        var grid = $(".grid")
        if( grid.length ){
            
          grid.isotope({
            itemSelector: '.grid-item',
            percentPosition: true,
            layoutMode: 'masonry',
            masonry: {
              //columnWidth: '.grid-sizer'
            }
          });
            
        }
    }
    gridMasonry();
});

.grid-item img {
  height: 192px;
  width: 100%;
  
  object-fit:cover;
}

.y-2.grid-item img {
  height: 400px;
  width: 100%;
}

.grid-item {
  margin-bottom: 16px;
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
  
  
  <div class="container">
    <div class="row grid">
      <div class="col-sm-3 grid-item y-2">
        <img src="https://dummyimage.com/400x900/000/fff&text=img" alt="" class="img-fluid">
      </div>
      <div class="col-sm-3 …

var locations = [
  {
    'name'    : 'Location 1',
    'adress'  : '215 West Girard Avenue 19123',
    'location':{
      'lat' : 39.9695601,
      'lon' : -75.1395161
    },
    'lable'   : '200',
    'prev'    : 'https://images.unsplash.com/photo-1489706920962-640fcad4b463?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=057570f4673903ff39658ee6ac17a66a&auto=format&fit=crop&w=600&q=60',
  },
  {
    'name'    : 'Location 2',
    'adress'  : '5360 Old York Road 19141',
    'location':{
      'lat' : 40.034038,
      'lon' : -75.145223
    },
    'lable'   : '30',
    'prev'    : 'https://images.unsplash.com/photo-1483519396903-1ef292f4974a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=594ae239b7e8e8ed17d447a9950adeb4&auto=format&fit=crop&w=600&q=60',
  },
  {
    'name'    : 'Location 3',
    'adress'  : '1350 W Girard Avenue 19123',
    'location':{
      'lat' : 39.9713524,
      'lon' : -75.1590360
    },
    'lable' …