mui 图片实现瀑布流显示

原文链接：http://www.bcty365.com/content-146-5320-1.html

13. *{

14. padding:0px;

15. margin:0px;

16. list-style: none;

17. font-style:normal;

18. font-family: arial;

19. font-family: Microsoft YaHei,arial;

20. }

21. .twoRankedBox{

22. margin:6px 8px;

23. overflow: hidden;

24. padding-bottom:25px;

25. }

26. .twoRankedBox ul{

27. width:49%;

28. float: left;

29. }

30. .twoRankedBox ul:last-child{

31. margin-left:2%;

32. }

33. .twoRankedBox ul li{

34. padding:5px;

35. margin-bottom:6px;

36. padding-bottom:8px;

37. background-color: #FFFFFF;

38. }

39. .twoRankedBox ul li p:first-child{

40. padding-top:0px;

41. }

42. .twoRankedBox ul li p{

43. padding-top:4px;

44. }

45. .product_picture img{

46. display: block;

47. width:100%;

48. }

49. .product_np{

50. overflow: hidden;

51. line-height:20px;

52. }

53. .product_np a{

54. display: block;

55. overflow:hidden;

56. text-overflow:ellipsis;

57. white-space:nowrap;

58. }

59. .product_np a:first-child{

60. font-size:0.9em;

61. color:#58b7e3;

62. width:65%;

63. float: left;

64. }

65. .product_np a:last-child{

66. font-size:0.8em;

67. color:#f00;

68. float: right;

69. width:35%;

70. text-align: right;

71. }

72. .product_ie{

73. font-size:0.8em;

74. color:#777;

75. }

76. for(var i=0;i

77. var chtml = '![]("'

78. +''+json.data[i].name+'￥'+json.data[i].price+''

79. +''+json.data[i].details+'

81. if($('.BoxLeft').height() < $('.BoxRight').height()){

82. $('.BoxLeft').append(chtml);

83. }else{

84. $('.BoxRight').append(chtml);

85. }

86. }